如何获取MUI多选带复选框组件的选中状态值？

我在用MUI的带复选框样式的多选Select组件，需要知道选项是被选中还是取消选中，以此设置正确的状态值。但查了event.target，发现它没有checked属性。

我的组件代码 #

<FormControl sx={{ m: 1, width: 300 }}>
    <InputLabel id="demo-multiple-checkbox-label">Tag</InputLabel>
    <Select
      labelId="demo-multiple-checkbox-label"
      id="demo-multiple-checkbox"
      multiple
      value={selectedVal}
      onChange={handleChange}
      input={<OutlinedInput label="Tag" />}
      renderValue={(selected) => selected.join(", ")}
      MenuProps={MenuProps}
    >
      {console.log(data)}
      {data.length > 0 ? (
        data.map((obj) => (
          <MenuItem
            key={obj.label + obj.accountNumber}
            value={obj.accountNumber ? obj.accountNumber : obj.label}
          >
            <Checkbox checked={selectedVal.indexOf(obj.label) > -1} />
            <ListItemText primary={obj.label} />
          </MenuItem>
        ))
      ) : (
        <MenuItem>None</MenuItem>
      )}
    </Select>
  </FormControl>

我的变更处理函数 #

const handleChange = (event) => {
  const {
    target: { value },
  } = event;
  console.log("value");
  console.log(event["target"].checked);
  setSelectedVal(
    // On autofill we get a stringified value.
    typeof value === "string" ? value.split(",") : value
  );
};

解决方法 #

MUI多选Select的onChange事件返回的event.target.value是当前所有选中项的完整数组，不需要单独去拿单个选项的checked属性。你可以直接用这个数组更新状态，或者通过对比新旧selectedVal数组，找出状态变化的选项：

1. 修正状态更新与变化项检测：

const handleChange = (event) => {
  const { value } = event.target;
  const newSelected = typeof value === "string" ? value.split(",") : value;
  setSelectedVal(newSelected);

  // 找出状态变化的选项（可选）
  const changedItems = data.filter(obj => {
    const itemValue = obj.accountNumber ? obj.accountNumber : obj.label;
    const wasSelected = selectedVal.includes(itemValue);
    const isSelectedNow = newSelected.includes(itemValue);
    return wasSelected !== isSelectedNow;
  });
  console.log("状态变化的选项：", changedItems);
};

2. 修复Checkbox选中状态判断的bug：
   当前Checkbox的checked判断逻辑和MenuItem的value不匹配（用label判断但value可能是accountNumber），需要统一用MenuItem的value来判断：

<MenuItem
  key={obj.label + obj.accountNumber}
  value={obj.accountNumber ? obj.accountNumber : obj.label}
>
  <Checkbox 
    checked={selectedVal.includes(obj.accountNumber ? obj.accountNumber : obj.label)} 
  />
  <ListItemText primary={obj.label} />
</MenuItem>

这样就能正确同步选中状态，也能通过新旧数组对比得知哪些选项被选中或取消了。

内容的提问来源于stack exchange，提问作者user3241846