反应:在映射渲染中处理onChange

Question

我使用材料 ui 创建了一个矩阵/表，并且还使用按钮切换来选择一个值。

该表是一个矩阵，成员可以在其中查看其当前成员资格，并且他们可以根据年龄从其他成员资格类型中进行选择...老年人，青少年，婴儿。

https://codesandbox.io/s/64j65yrxpw

上面的演示将提供更清晰的信息。问题是，当我选择"是"、"否"或"可能"选项时 - 选择所有人的所有选项，而不仅仅是该行和所有成员资格类型的那个人 - (单击一个选项，您将看到问题(。

以下是表格的馈送内容：

const selected = [
  { personId: "0001657", fullName: "Joe Bloggs", seniorStatus: "Yes" },
  { personId: "0001666", fullName: "John Doe", seniorStatus: "No" }
];

理想情况下，希望根据选择返回类似的东西：

 const newlySelected = [
   { personId: "0001657", fullName: "Joe Bloggs", seniorStatus: "Yes", juniors: "maybe" },
   { personId: "0001666", fullName: "John Doe", seniorStatus: "No", juniors: "no", infants: "yes" },
 ];

我很欣赏这里有两个问题...切换不单独运行并返回所需的 JSON - 任何帮助都会很棒。谢谢

Answer 1

你有一个"太简单"state。

state = {
  alignment: "left",
  formats: ["bold"]
};

所有按钮都使用您的state.alignment。如果你想把它保持为单个组件的形式，你需要把它变成2D数组：

[
  ['<#1 btn value>', '<#2 btn value', ...],
  [..., ..., ...]
]

然后，当您调用setState时，您需要根据操作位置更改 2D 数组中的相关项目。你必须索引，一行，一个单元格，你可以使用它们。

更新新状态 - 2D 阵列

value: [
  ["no", "no", "no"],
  ["no", "no", "no"]
]

新的 ToggleButtonGroup - 使用 rowIdx 和 cellIdx 在 2D 数组中具有正确的位置

<ToggleButtonGroup
  className={classes.toggleButtonGroup}
  value={value[rowIdx][cellIdx]}
  exclusive
  onChange={(event, val) => this.handleValue(event, val, rowIdx, cellIdx)}
>

New handleValue - 使用 rowIdx， cellIdx 更改正确位置的值。

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