代码之家 › 专栏 › 技术社区 › Anita

单击一行以打开包含该行数据的模式

react-table modal-dialog reactjs

0

Anita · 技术社区 · 8 年前

我正在使用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
       />

按钮单击后的操作

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

所以这就是我现在的工作方式,但是模式没有显示出来。有人能帮我吗?我做错什么了?

1 回复 | 直到 8 年前

1

2

Liam 8 年前

为什么你要用 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});
  };