Material-UI Checkbox组件无法正常勾选/取消勾选问题求助

问题根因 #

• 属性绑定不匹配：你给Checkbox组件设置的name属性值为isVirtual，但checked属性绑定的是state.checkedB，触发onChange事件时，你是根据event.target.name修改状态对应字段，实际修改的是状态中不存在的isVirtual字段，checkedB的值永远不会更新，所以视图不会响应勾选操作。
• 状态更新语法错误：handleChange中setState({ ...!state, [event.target.name]: event.target.checked });的写法错误，!state是对整个state对象做取反运算，对象取反结果为布尔值false，展开布尔值无法继承原有状态的其他字段，会导致原有状态被破坏。
• 多余的错误逻辑：Checkbox触发的change事件中event.target.value默认值为'on'，你直接用该值更新原本为数组类型的personName状态，会导致该状态类型被破坏，且这段逻辑和复选框勾选功能无关。

修复后的代码 #

复选框组件代码 #

<Grid item xs={12} sm={6}>
  <FormControlLabel
    control={
      <Checkbox
        checked={state.checkedB}
        onChange={handleChange}
        name="checkedB"
        color="primary"
      />
    }
    label="Criar Link de Reunião (Google Meeting)"
  />
</Grid>

状态与事件处理代码 #

const [state, setState] = React.useState({
  checkedA: true,
  checkedB: true,
  checkedF: true,
  checkedG: true,
});

const [personName, setPersonName] = React.useState([]);

const handleChange = (event) => {
  // 正确展开原有状态，仅修改对应name的字段
  setState({ ...state, [event.target.name]: event.target.checked });
  // 无特殊需求可删除以下和复选框逻辑无关的代码
  // setPersonName(event.target.value);
};

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