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

Question

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

这是我的代码和框 - https://codesandbox.io/s/50pl0jy3xk

正在进行一些交互，但基本上用户可以单击成人、 child 或婴儿的成员(member)类型。有"is"、“否”和“也许”3个选项。一旦用户选择了一个或多个选项，该选项就会提交给 api。

我已经从接收属性中添加了默认值，因此如果用户已经获得成员(member)资格，则会突出显示它们。

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

如您所见，已为用户当前的成员资格添加了默认状态字段(上面)。所有这些需要做的就是突出显示相关的切换，如果不更改数据，则不需要提交到 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 组中使用“yes”、“no”和“maybe”，但在默认值中使用“Yes”、“No”等。我想这是一个错字，两者都需要匹配。
2. 现在您可以这样设置值:

   value={  value[rowIdx]["defaultStatus"] &&      // check if defaultStatus exists  value[rowIdx]["defaultStatus"].filter(  // filter the defaultStatus    ds => ds.membership === cellIdx.label // and look for the specific membership type  )[0]                                    // check if that exists       ? value[rowIdx]["defaultStatus"].filter(        ds => ds.membership === cellIdx.label      )[0].defaultvalue                   // set the value    : null                                // otherwise null}

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

附注:

• 我注意到handleValue的逻辑将不再起作用。看起来它以前是一个二维数组，现在您已经根据新模式定义了它。可能您正在编辑过程中。但你知道。
• 我认为如果你像这样制作 defaultStatus 而不是数组会更好:

  defaultStatus: {  Seniors: "yes",  Juniors: "no"}

这样您就不必像我在示例中那样过滤数组。您可以简单地使用 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    });  };

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