如何获取React表行数据Onclick

时间:2019-05-11 01:09:29

标签: reactjs onclick react-props react-table

嗨,我正在尝试设置我的react应用程序,以便当您单击我的react-table中的行项目中的按钮时,该行中的数据将传递到另一个组件上。目前,我只是在尝试console.log正确的数据,但不确定如何基于click传递反应表行数据。我怎样才能做到这一点? 谢谢

我的虚拟数据与按钮(显示详细视图)一起存储在状态中,我想通过onclick触发数据:

    columns: [
      {
        Header: "First Name",
        accessor: "fname"
      },
      {
        Header: "Last Name",
        accessor: "lname"
      },
      {
        Header: "Employee Group",
        accessor: "egroup"
      },
      {
        Header: "Date of Birth",
        accessor: "dob"
      },
      {
        Header: "",
        id: "id",
        Cell: ({ row }) => (
          <button onClick={e => this.handleShow()}>
            Detailed View
          </button>
        )
      },
    ],
    posts: [
      {
        fname: "gerald",
        lname: "nakhle",
        egroup: "faisbuk",
        dob: "8/10/1995"
      }
    ]

我致电呈现表格的电话:

<ReactTable columns={this.state.columns} data={this.state.posts}></ReactTable>

我的onclick处理函数,但不确定如何访问后面的表行数据

handleShow(e) {
    console.log(e);
  }

4 个答案:

答案 0 :(得分:2)

对于 React-table v7:

将回调 prop onRowClicked 传递给 table 组件,

在您的表格组件中调用回调:

...row.getRowProps({
         onClick: e => props.onRowClicked && props.onRowClicked(row, e),
})
<块引用>

在 react-table v7 中,所有开始的 HTML 元素上的展开操作符 get...Propsprops getter,例如:

row.getRowProps()、cell.getCellProps()、column.getHeaderProps()、 getTableBodyProps(), getTableProps() 等..你可以再通过 属性来扩展它。例如:

    ...cell.getCellProps({ 
        style: {color: 'red'},  
        onClick: ()=> {}   
    }) 

答案 1 :(得分:0)

您将需要为该行添加一个onClick处理程序

const onRowClick = (state, rowInfo, column, instance) => {
    return {
        onClick: e => {
            console.log('A Td Element was clicked!')
            console.log('it produced this event:', e)
            console.log('It was in this column:', column)
            console.log('It was in this row:', rowInfo)
            console.log('It was in this table instance:', instance)
        }
    }
}

<ReactTable columns={this.state.columns} data={this.state.posts} getTrProps={onRowClick}></ReactTable>

查看此信息以获取更多信息react-table component onClick event for a column

答案 2 :(得分:0)

在您的表定义中:

export function TableCustom({handleShow}) {
    const columns = React.useMemo(() => [{
        Header: 'Action',
        accessor: 'action',
        Cell: props => <button className="btn1" onClick={() => handleShow(props)}>Details</button>,
    },]

    return <ReactTable>;
});

在你的父组件中:查看点击行的数据:

const handleShow = (cell) => {
    console.log(cell?.row?.original);
}

答案 3 :(得分:-4)

还要确保将函数绑定到构造函数中,或使用以下语法:

handleShow = (e) => {
    console.log(e);
  }