设置 MUI 切换按钮组的默认值

Question

我正在使用 Material UI 库，并将按钮切换小部件用作选择器。

这是我的密码箱 - https://codesandbox.io/s/50pl0jy3xk

进行了一些交互，但基本上用户可以单击成人、儿童或婴儿的会员类型。有yes、no和maybe这3个选项。一旦用户选择了一个或多个选项，它就会提交给 api。

我从接收属性中添加了一个默认值，所以如果用户已经获得了会员资格，它会将它们突出显示。

const selected = [
  {
    personId: "0001657",
    fullName: "Joe Bloggs",
    seniorStatus: "Yes",
    defaultStatus: [
      { membership: "Seniors", defaultvalue: "Yes" },
      { membership: "Juniors", defaultvalue: "No" }
    ]
  }
];

如您所见，已为用户当前的会员资格添加了 defaultStatus 字段（上图）。所有这些需要做的就是突出显示相关的切换，如果没有更改数据，则不需要提交给 api。（下）-我猜该值需要被询问，但该值已在我的案例中使用。

            <ToggleButtonGroup
                className={classes.toggleButtonGroup}
                value={value[rowIdx][cellIdx.value]}
                exclusive
                onChange={(event, val) =>
                  this.handleValue(event, val, rowIdx, cellIdx.value)
                }
              >
                <ToggleButton
                  className={`w-100 ${classes.toggleButton}`}
                  value="yes"
                >
                  Yes
                </ToggleButton>
                <ToggleButton
                  className={`w-100 ${classes.toggleButton}`}
                  value="no"
                >
                  No
                </ToggleButton>
                <ToggleButton
                  className={`w-100 ${classes.toggleButton}`}
                  value="maybe"
                >
                  Maybe
                </ToggleButton>
              </ToggleButtonGroup>

任何帮助或帮助都会很棒！

Answer 1

1. 您在ToggleButton 组中使用“是”、“否”和“可能”，但在默认值中使用“是”、“否”等。我想这是一个错字，两者都需要匹配。
2. 现在您可以像这样设置值： 价值={ value[rowIdx]["defaultStatus"] && // 检查 defaultStatus 是否存在 value[rowIdx]["defaultStatus"].filter( // 过滤默认状态 ds => ds.membership === cellIdx.label // 并查找特定的会员类型 )[0] // 检查是否存在 ? value[rowIdx]["defaultStatus"].filter( ds => ds.membership === cellIdx.label )[0].defaultvalue // 设置值 : null // 否则为 null }

这是您的分叉示例：https://codesandbox.io/s/mjk9zy5rqp?fontsize=14

PS：

• 我注意到 handleValue 的逻辑将不再起作用。看起来它以前是一个二维数组，现在您已经根据新模式定义了它。可能是您正在进行编辑。但你知道的。
• 我认为如果你像这样制作defaultStatus而不是数组会更好： 默认状态：{ 前辈：“是”， 少年：“没有” }

这样您就不必像我在示例中那样过滤数组。您可以简单地使用 value[rowIdx]["defaultStatus"][cellIdx.label] 作为值。

更新：

您的handleValue 函数不起作用，因为您将状态设置在错误的位置（可能来自您的旧状态设计）。您需要对其进行修改以合并您的新状态设计：

handleValue = (event, val, rowIdx, cellIdx) => { ... if (!newValue[rowIdx]["defaultStatus"]) { // 检查你是否有该行的 defaultStatus newValue[rowIdx]["defaultStatus"] = []; // 如果不存在则创建空数组 } const updatable = newValue[rowIdx]["defaultStatus"].filter( // 找到成员对应的列 ds => ds.membership === cellIdx ); if (updatable[0]) { // 如果这样的列存在 可更新[0]["默认值"] = val; // 更新默认值 } 别的 { newValue[rowIdx]["defaultStatus"].push({ // 否则创建一个新的默认值 成员资格：cellIdx， 默认值：val }); } 这个.setState({ 值：新值 }); };

在同一个沙盒 url 中查看我更新的代码。同样，使用普通对象而不是数组可以大大简化逻辑。