Question

我已经使用材质ui创建了一个矩阵/表格，还使用了按钮切换来选择一个值。

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

上面的演示将更加清晰。问题是，当我选择是，否或也许的选项时-选择了所有人中的所有选项，而不仅仅是该行中所有成员类型中的那个人-（单击一个选项，您将看到问题）。 / p>

以下是提供给表格的内容：

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数组中更改相关项。您必须为行之一，单元格之一建立索引，才能使用它们。

更新新状态-二维数组

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

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

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

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

1 个答案: