Question

我正在尝试使用Firebase和React-Table创建一个管理员页面。我的主要问题是我需要能够从某个单元格中提取数据，然后在函数中调用它。

例如：在一行上，您具有用户的信息（名称-电子邮件）。

在该行的最后一个单元格中，有一个按钮，显示“删除用户”。

我需要能够从该行的第二个单元格中提取电子邮件，并在函数调用中使用它来删除用户。不确定如何获取数据。

这是呈现的表。所需信息位于第二列，称为电子邮件。

                    ? <LoadingScreen/>
                    : <ReactTable
                        data={this.state.data
                        ? this.state.data
                        : []}
                        columns={keys.map(string => {
                        return ({Header: string, accessor: string})

                    }).concat([{
                        Header: "Actions",
                        accessor: null,
                        Cell: row => (
                            <div>

                                <Button type='primary' onClick={this.showModal}> Change Password </Button>
                                <Modal
                                    title="Change Password"
                                     visible={this.state.visible}
                                     onOk={this.handleOk}
                                     onCancel={this.handleCancel}
                                     mask= {false}
                                 >
                                <PasswordChangeForm/>
                                </Modal>
                                <Button type='danger' onClick={this.showDeleteConfirm}> Delete User </Button>
                            </div>
                        )
                        }])}
                        defaultPageSize={10}
                        className="-striped -highlight"/>
}  ```

Answer 1

您可以从getTrProps属性获取行信息。

 <ReactTable
   getTrProps={(state, rowInfo, column, instance) => ({
              onClick: e => console.log(rowInfo.original)
              })}
 />

在上面的代码中，当单击某行时，它记录该特定行的详细信息。您可以过滤出所需的信息并在内部调用外部函数。

如何从特定单元格获取数据

1 个答案: