設置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
    });
  };

在相同的沙箱網址中查看我的更新代碼。 同樣，使用普通對象而不是數組可以大大簡化邏輯。