javascript - 更改表列中的所有单元格值，已使用二维数组作为行和单元格

Question

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
    });
  };

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

Answer 1

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

我还认为(我可能是错的)您打算将所有“列明智”选择值的状态也保留在状态中。但目前您将其保留在 state.status 中。这样，在一列中选择"is"会将其他列的选择菜单更改为"is"，对吗？

所以我将 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>

这是 fork 的沙箱: