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

Question

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

这里是我的codesandbox - https://codesandbox.io/s/50pl0jy3xk

正在进行一些交互，但是基本上用户可以单击成人，儿童或婴儿的成员资格类型。 有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. 现在，您可以像这样设置值：

   \n 值= {\n   value [rowIdx] [“ defaultStatus”] && //检查defaultStatus是否存在\n   value [rowIdx] [“ defaultStatus”]。filter（//过滤defaultStatus\n     ds => ds.membership === cellIdx.label //，然后查找特定的成员资格类型\n   ）[0] //检查是否存在   \n     ？  值[rowIdx] [ “defaultStatus”]。过滤（\n         ds => ds.membership === cellIdx.label\n       ）[0] .defaultvalue //设置值\n     ：null //否则为null\n }\n

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

PS：

• 我注意到handleValue的逻辑将不再起作用 。 看起来它以前是2D数组，现在您已经根据新架构对其进行了定义。 可能是您正在编辑中。 但是，你知道。
• 我认为最好是这样使defaultStatus而不是数组：

  \n defaultStatus：{\n   老年人：“是”，\n   大三：“不”\n } 

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

更新：

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

handleValue = (event, val, rowIdx, cellIdx) => {
    ...
    if (!newValue[rowIdx]["defaultStatus"]) {   // check if you have defaultStatus for that row
      newValue[rowIdx]["defaultStatus"] = [];   // create empty array if that doesn't exist
    }
    const updatable = newValue[rowIdx]["defaultStatus"].filter(  // find the column corresponding to the membership
      ds => ds.membership === cellIdx                       
    );

    if (updatable[0]) {                   // if such column exists
      updatable[0]["defaultvalue"] = val; // update the defaultvalue
    } else {
      newValue[rowIdx]["defaultStatus"].push({  // otherwise create a new defaultvalue
        membership: cellIdx,
        defaultvalue: val
      });
    }
    this.setState({
      value: newValue
    });
  };

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