单击一行以打开包含该行数据的模式 [英] Click on a row to open a modal with the row's data

问题描述

我正在使用 react-table，这是我的表:

I am using react-table and here's my 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
       />

按钮点击后的动作

handleButtonClick = (e, row) => {
    this.setState({ visible: true});
    return 
       <Modal 
          title="title" 
          visible={this.state.visible}
        >
        // show data here
    </Modal>
  }; 

这就是我现在的工作方式，但没有显示模态.谁能帮我这个?我做错了什么?

So this is how I am working right now, but the modal isn't getting displayed. Can anyone help me with this? What am I doing wrong?

推荐答案

为什么你用 handleButtonClick 函数返回模态而不是用 ReactTable

Why you return the modal with handleButtonClick function instead of add it with 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});
  }; 

这篇关于单击一行以打开包含该行数据的模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！