反应：Material Table 行中的按钮需要将参数传递给编辑模式

Question

我有一个 Material Table，其中每行的最后一列是一个“编辑”按钮。单击编辑按钮时，我需要将一些 table 行参数（例如 rowData.subjectId、rowData.username ）传递给生成的 Bootstrap-React Modal 以进行编辑。这些数据项存储在状态中。

这些参数没有出现在我的模式中并且是空的（{this.state.activeItemId}、{this.state.activeItemName}）。调试器显示 handleDialogOpen = (rowData) => {..} 收到一个与我想要的完全不同的参数，Material Table 的 rowData.

注意： 目前我正在尝试 onClick={(rowData) => this.handleDialogOpen(rowData)}> 。我也试过 onClick={this.handleDialogOpen(rowData)} 但那会进入无限循环， 错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。

render() {
<MaterialTable 
    title="Material Table"
    columns={[
        { title: 'Subject ID', field: 'subjectId' },
        { title: 'Username', field: 'username' },
        { title: 'Actions', render: (rowData) => 
            <div>
                <Button onClick={(rowData) => this.handleDialogOpen(rowData)}>Edit</Button>
            </div>
        }
    ]}
    data={items}
/>

<Modal show={this.state.isDialogOpen} onHide={this.handleDialogClose}
       itemId={this.state.activeItemId} itemName={this.state.activeItemName}>
<Modal.Header closeButton>
  {/* DISPLAY ACTIVE ITEM ID / NAME HERE */}
  <Modal.Title>Modal heading {this.state.activeItemId} {this.state.activeItemName}</Modal.Title>
</Modal.Header>
<Modal.Body>
</Modal.Body>
<Modal.Footer>
  <Button variant="secondary" onClick={this.handleDialogCloseB}>
    Close
  </Button>
</Modal.Footer>
</Modal>    

}

// Dialog Open Handler
handleDialogOpen = (rowData) => {
    this.setState({isDialogOpen: true, activeItemId: rowData.subjectId, activeItemName: rowData.username});
};

Answer 1

从 onClick 事件中删除参数

<div>
    <Button onClick={() => this.handleDialogOpen(rowData)}>Edit</Button>
 </div>

反应：Material Table 行中的按钮需要将参数传递给编辑模式

React: Button in Material Table Row needs to pass param to Edit modal

reactjs

material-table