IT技术 - 如何获取 React Table Row Data Onclick - 吾爱随笔录

如何获取 React Table Row Data Onclick

IT技术 reactjs onclick react-props react-table

2021-04-28 13:34:29

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

我的虚拟数据与按钮（显示详细视图）一起存储在状态中，我想触发通过 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个回答

您需要为该行添加一个 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 组件 onClick 事件列

对于 React-table v7：

将回调propsonRowClicked传递给表格组件，

在您的表组件中调用回调：

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

在 react-table v7 中，所有以 HTML 元素开头的扩展操作符get...Props都是props getter，例如：

row.getRowProps()、cell.getCellProps()、column.getHeaderProps()、getTableBodyProps()、getTableProps() 等。你可以传递更多的属性来扩展它。例如：

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

在您的表定义中：

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);
}

还要确保在构造函数中绑定函数，或使用以下语法：

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

其它你可能感兴趣的问题

上一篇使用较小喷嘴的缺点和后果是什么？下一篇从长丝碎片清洁挤出机齿轮（滚齿）的好方法？