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

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

这是我的密码箱-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>

任何帮助或协助都将非常棒！

最佳答案

您在ToggleButton组中使用“是”，“否”和“也许”，但是在默认值中使用“是”，“否”等。我猜这是一个错字，两者都需要匹配。
现在，您可以像这样设置值：

值= {
  value [rowIdx] [“ defaultStatus”] && //检查defaultStatus是否存在
  value [rowIdx] [“ defaultStatus”]。filter（//过滤defaultStatus
    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的逻辑将不再起作用。看起来它以前是2D数组，现在您已经根据新架构对其进行了定义。可能是您正在编辑中。但是，你知道。
我认为最好是这样使defaultStatus而不是数组：

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]）{//如果存在该列
      updatable [0] [“ defaultvalue”] = val; //更新默认值
    }其他{
      newValue [rowIdx] [“ defaultStatus”]。push（{//否则创建一个新的默认值
        成员资格：cellIdx，
        默认值：val
      }）;
    }
    this.setState（{
      值：newValue
    }）;
  };


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

关于javascript - 设置MUI切换按钮组的默认值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55092442/