ReactJS

Question

我正在使用 material ui Table。其中一列有 SelectField 组件，它是一个下拉列表，只有很少的项目可供选择。此处示例代码：

<TableBody
        displayRowCheckbox={this.state.showCheckboxes}
        deselectOnClickaway={this.state.deselectOnClickaway}
        showRowHover={this.state.showRowHover}
        stripedRows={this.state.stripedRows}
      >
        {tableData.map( (row, index) => (
          <TableRow key={index} selected={row.selected}>
            <TableRowColumn>{index}</TableRowColumn>
            <TableRowColumn>
                <SelectField key={index} value={row.clientId} onChange={this.handleRowChange}>
                {clientsDropdownData.map((row, index) =>(
                    <MenuItem key={row.val} value={row.val} primaryText={row.name} />

                ))}
                </SelectField>
            </TableRowColumn>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.status}</TableRowColumn>
          </TableRow>
          ))}
      </TableBody>

根据提供给 table 的数据中的 clientId 值正确设置了所有行的下拉列表的初始值。在更改所选行的下拉列表时，我想更改提供的数据的 clientId 属性。我怎样才能实现它？ React 是关于状态的。但是如何管理多个动态状态？

这就是我对 SelectField 的 onChange 的看法：

handleRowChange = (event, index, rowValue) => {
      //this.setState({rowValue}); how to set state here?
      tableData[index]['clientId'] = rowValue; //this doesn't work. But this is what I want. I want to update tableData and also update the UI.
  }

Answer 1

您可以在您所在的州使用属性 tableData。当您想更新它时（table 数据和 Table 视图），您可以 只需更改状态 中的 table 数据：

handleRowChange = (event, index, rowValue) => {
      let newTableData = this.state.tableData
      newTableData[index]['clientId'] = rowValue;
      this.setState({tableData: newTableData}); //New table set and view updated
  }

并直接使用您所在州的 table 替换：

{tableData.map( (row, index) => (

和

{this.state.tableData.map( (row, index) => (

这就是为什么 React 的状态实际上是 usfeul 的原因。你可以在那里放任何你想要的东西，当你更新它时，视图将相应地重新渲染。如果您的状态变得更加复杂，您可以使用 Redux

等替代方法

ReactJS - 在 table 中设置行下拉列表

ReactJS - Setting row dropdown in a table

material-ui

dropdown