ReactJS-在表格中设置行下拉菜单 [英] ReactJS - Setting row dropdown in a table

问题描述

我正在使用材料ui表。其中一列具有SelectField组件，这是一个下拉菜单，其中没有几个项目可供选择。此处的示例代码：

I'm using a material ui Table. One of the column has SelectField component, which is a dropdown with few items to choose from. Sample code here:

<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>

所有行的下拉菜单的初始值都是根据从提供给表。更改所选行的下拉菜单时，我想更改提供的数据的clientId属性。我该如何实现？ React是关于状态的。但是我该如何管理多个动态状态呢？

Initial value of the dropdowns of all the rows are set properly based on clientId value from data supplied to the table. On change of selected row's dropdown, I want to change supplied data's clientId property. How can I achieve it? React is all about states. But how can I manage multiple and dynamic states?

这就是SelectField onChange的功能：

This is what I have for onChange of SelectField:

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.
  }

推荐答案

您可以使用属性 tableData 您所在的州。当您要更新它（表格数据和表格视图）时，可以使用以下方法仅更改状态下的表格数据：

You can use an attribute tableData in your state. When you want to update it (the table data and the Table view) you can just change your table data in the state with:

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

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

And use directly your state's table replacing:

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

with

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

这就是为什么React的状态实际上是usfeul。您可以将所需的内容放到此处，并在更新时将相应地重新渲染视图。如果您的状态变得更加复杂，则可以使用 Redux

This is why React's state is actually usfeul. You can put whatever you want there and, when you update it, the view will be re-rendered acordingly. If your state gets more complex you can use alternatives like Redux

这篇关于ReactJS-在表格中设置行下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！