React material-ui多选Checkbox组件onChange触发后勾选状态不更新问题

问题原因 #

有两个核心错误点导致复选框状态无法同步：

• Checkbox的checked属性绑定错误：你当前使用的defaultChecked仅在组件首次渲染时生效，后续状态更新不会触发视图同步，必须绑定到你存储的editRecordState对应字段才能实现双向绑定。
• 事件处理函数逻辑错误：针对复选框取消选中的场景，你当前的逻辑会走else分支，将evt.target.value赋值给对应状态，而不是赋值false，导致状态类型错误，无法和复选框的选中状态匹配。

修正方案 #

1. 修改Checkbox的checked绑定 #

把原来的checked={defaultChecked}替换为状态对应字段的绑定：

<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>

2. 修正handleInputChanges逻辑 #

通过输入框type区分取值逻辑，统一处理不同输入类型的更新：

const handleInputChanges = (evt) => {
    if (evt.target.name === '') return
    // 复选框取checked值，普通输入框取value
    const updateValue = evt.target.type === 'checkbox' ? evt.target.checked : evt.target.value
    setEditRecordState({
        ...editRecordState,
        [evt.target.name]: updateValue
    })
}

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