更改表格列中的所有单元格值，已将二维数组用于行和单元格答案

【问题标题】：Change all cell values in table column, already using 2D array for row and cell更改表格列中的所有单元格值，已将二维数组用于行和单元格
【发布时间】：2019-02-10 17:51:12
【问题描述】：

https://codesandbox.io/s/1p770371j

上面的演示显示了一个表格，您可以在其中更改每次销售中的数据，并且二维数组记录了数据更改发生的行和列单元格。我刚刚在列标题标题中添加了一个列按钮。

这个想法是按钮会将所有列值更改为相同的值。它会打开一个包含 3 个选项的对话框。单击后，该列中的所有选项都会相应更改。

这是在更改时返回每个单独的单元格/行数据的句柄，这很好。

  handleValue = (event, val, rowIdx, cellIdx) => {
    const newValue = [...this.state.value];
    newValue[rowIdx][cellIdx] = val;
    this.setState({
      value: newValue
    });
  };

我有一个更新所有列的新句柄：

  handleChange = name => event => {
    this.setState({ [name]: event.target.value });
  };

它只是在瞬间改变了选择值，但是这个值需要更新该列中的所有值，猜测它需要看起来像上面的处理这样的东西......

  handleChange = event => {
    const newAllValues = [...this.state.value];

    newAllValues = [event.target.value]

    this.setState({
      value: newAllValues
    });
  };

在这方面的任何帮助都会很棒，我需要为列引入第三个数组属性吗？

【问题讨论】：

标签： javascript arrays reactjs material-ui

【解决方案1】：

您可以发送handleChange 您打算更新的列作为参数，并根据该列名称更新每一行。

我还认为（我可能是错的）您打算将所有“按列”选择值的状态也保持在状态中。但目前您将其与 state.status 保持一致。这样一列中选择“是”会将其他列的选择菜单更改为“是”，对吧？

所以我把status改成了一个对象：

state = {
  value: selected,
  status: {}
};

现在更新status 的逻辑也应该添加到您的handleChange 函数中。思路类似，更新任一列的选择菜单已更改。

所以处理程序变成：

// take `column` as parameter
// update each row's `column` value. i.e. row[column]
handleChange = column => event => {
    const newValue = this.state.value.map(row => ({
      ...row,
      [column]: event.target.value
    }));

    this.setState({
      // status is now object, save whichever column just been selected
      status: {
        ...this.state.status,
        [column]: event.target.value
      },
      // set value to newly calculated rows
      value: newValue
    });
};

我还对您的渲染方法进行了小幅修改，以适应您的状态的新形状和handleChange 的新签名。例如：

<Select
  native
  value={this.state.status[mItem.value]} // i.e. status['Seniors']
  onChange={this.handleChange(mItem.value)} // sends 'Seniors' as argument
  input={<Input id="status-native-simple" />}
>
  //...
</Select>

这是分叉的沙箱：

【讨论】：