Question

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

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

正在进行一些交互，但是基本上用户可以单击成人，儿童或婴儿的会员类型。有3种选择，是，否和也许。用户选择一个或多个选项后，就会提交给api。

我已经从接收道具中添加了一个默认值，因此，如果用户已经拥有一个成员资格，则将其突出显示。

{
    "cmd": ["python", "-u", "$file"],
    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
    "selector": "source.python",
    "shell": true
}

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

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

任何帮助或协助都是很棒的！

Answer 1

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

现在您可以像这样设置值：

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
}

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

PS：

我注意到 handleValue的逻辑不再起作用。看起来它以前是2D数组，现在您已经根据新架构对其进行了定义。可能是您正在编辑中。但是你知道的。
我认为最好将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
    });
  };

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

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

1 个答案: