更改表格列中的所有单元格值，而行和单元格已使用2D数组

Question

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

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

该想法是该按钮会将所有列值更改为相同的值。它会打开一个包含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
    });
  };

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

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

这是分叉的沙箱：