我正在使用 react-table,这是我的表格:
<ReactTable
data={this.props.data}
columns={[
{
Header: "id",
accessor: "id",
width: 50
},
{
Header: "Name",
accessor: "name",
width: 200
},
{
Header: "",
id: "id",
Cell: ({ row }) => (
<button onClick={e => this.handleButtonClick(e, row)}>
Click Me
</button>
)
}
]}
defaultPageSize={10}
showPaginationBottom
/>
点击按钮后的 Action
handleButtonClick = (e, row) => {
this.setState({ visible: true});
return
<Modal
title="title"
visible={this.state.visible}
>
// show data here
</Modal>
};
这就是我现在的工作方式,但是没有显示模态。谁能帮我这个?我做错了什么?
最佳答案
为什么使用 handleButtonClick
函数返回模态而不是使用 ReactTable
添加它
<ReactTable
data={this.props.data}
columns={[
{
Header: "id",
accessor: "id",
width: 50
},
{
Header: "Name",
accessor: "name",
width: 200
},
{
Header: "",
id: "id",
Cell: ({ row }) => (
<button onClick={e => this.handleButtonClick(e, row)}>
Click Me
</button>
)
}
]}
defaultPageSize={10}
showPaginationBottom
/>
{this.state.visible && <Modal
title="title"
visible={this.state.visible}
>
// show data here
</Modal>}
handleButtonClick = (e, row) => {
this.setState({ visible: true});
};
关于reactjs - 单击一行以打开包含该行数据的模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50500115/