如何获取 React 表行数据 Onclick [英] How to get React Table Row Data Onclick
问题描述
您好,我正在尝试设置我的 react 应用程序,以便当您单击我的 react-table 中的行项目中的按钮时,该行中的数据将传递到另一个组件.目前我只是想控制台记录正确的数据,但不确定如何根据点击传递反应表行数据.我怎样才能做到这一点?谢谢
Hi I am trying to set up my react app such that when you click on a button in a row item in my react-table the data in that row is passed onto another component. At the moment I am simply trying to console.log the correct data but am unsure of how to pass react-table row data based on click. How can I do this? Thanks
我的虚拟数据与按钮(显示详细视图)一起存储在状态中,我想触发数据通过 onclick:
My Dummy data stored in state along with the button (Show Detailed View) which I want to trigger the data passing 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 处理函数,但我不确定如何访问我所追求的表格行数据
My onclick handler function but im not sure how I can access the table row data I'm after
handleShow(e) {
console.log(e);
}
推荐答案
您需要为该行添加一个 onClick 处理程序
You will need to add an onClick handler for the row
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 事件一列
check this post for more info react-table component onClick event for a column
这篇关于如何获取 React 表行数据 Onclick的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!