【关于Checkbox的checked及defaultChecked用户交互更新相关问题解决】

1.官方文档

我们首先看antd官方文档Checkbox组件的属性文档

checked	指定当前是否选中	boolean	false
defaultChecked	初始是否选中	boolean	false

2.defaultChecked 不会动态更新！

在 React 中，如果你使用的是 defaultChecked 属性，那么它不会像 checked 属性那样随着用户的交互而更新。defaultChecked 仅用于设置组件的初始状态，而不会在组件渲染后继续控制其状态。

3.checked实现设置初始值并动态更新

如果你想要实现一个可以被用户交互改变状态的复选框，你应该使用 checked 属性，并结合 onChange 事件来更新状态。这通常涉及到使用 useState hook 来管理状态。

• 如果用checked来设置初始值，但是遇到用户无法手动（点击）取消的情况，在 React 中，通常使用状态（state）来管理组件的可交互部分。

伪代码

//用useState来管理checked的点击状态
 const [checked, setChecked] = useState(false);
 const onChange = (event) => {
    setChecked(event.target.checked);
  };
//设置初始值选中
useEffect(()=>{
    if(!resData.valueArr){
    //如果接口返回值为空，就设置checked选中状态为false（不选中）
        setChecked(false)
     }else{
      //如果接口返回值不为空，通过.includes判断是否包含当前值，设置checked的选中状态
        setChecked(resData.valueArr.includes(currentValue))
    } 
},[resData.id])



//dom
<Checkbox onChange={onChange} value{currentValue} checked={checked}>Checkbox</Checkbox>

4.总结

• 首先defaultChecked，只是组件初始化第一次的时候设置初始值，不会动态更新！
• 其次checked设置值选中，要用state状态管理结合onChange方法才能实现用户交互（点击取消）的数据更新！