React material-ui 多个复选框和 onChange 不工作

Question

我在编辑模式表单中有多个复选框，它有一个用于更新的记录结构，包含输入，包括处于状态的复选框。输入有一个 onChange 事件。

当我点击复选框时，onChnage 'handleInputChanges' 会执行。 evt.target.checked 是真还是假。 evt.target.name 正确并与 updateRecordStructure 中的名称匹配。

但复选框不会显示选中或未选中状态。

标记：

<Grid item xs={5}>
    <FormControlLabel variant="outlined" size="small"
         control={<Checkbox
         checked={defaultChecked}
         color="primary"
         name={name}
         onChange={handleInputChanges}/>
        }
        label={label}
        id={id}
    />
</Grid>

    const updateRecordStructure ={
            id: 0,
            name: '',
            canDo1b: false,
            canDo1a: false,
            canDo2b: false,
            canDo2a: false
 };
     
 const [editRecordState, setEditRecordState] = React.useState(
    updateRecordStructure
);

   const handleInputChanges = (evt) => {
    //  Distinguish which input the change is coming from using the target.name.
    //  The square brackets around target.name, creates a dynamic key of that targets name in the object.
      
    if (evt.target.name !== '') {
        const value = evt.target.value;

         if (evt.target.checked) {
            setEditRecordState({
                ...editRecordState,
                [evt.target.name]: evt.target.checked
            });
        } else {
            setEditRecordState({
                ...editRecordState,
                [evt.target.name]: value
            });
        }
    }
};

Answer 1

你的状态甚至没有连接到复选框。

您的代码：

<Grid item xs={5}>
  <FormControlLabel variant="outlined" size="small"
    control={
      <Checkbox
        checked={defaultChecked} // You are supposed to specify your state here
        color="primary"
        name={name}
        onChange={handleInputChanges}
      />
    }
    label={label}
    id={id}
  />
</Grid>

即

<Grid item xs={5}>
  <FormControlLabel variant="outlined" size="small"
    control={
      <Checkbox
        checked={editRecordState[name]}
        color="primary"
        name={name}
        onChange={handleInputChanges}
      />
    }
    label={label}
    id={id}
  />
</Grid>

如果您希望默认选中某些复选框，请改为更新 updateRecordStructure。

React material-ui 多个复选框和 onChange 不工作

React material-ui multiple checkboxes and onChange not working

checkbox

reactjs

material-ui

react-state