如何在AntD FormItem中实现Checkbox值为假时反向选中？

你遇到的核心问题是AntD FormItem会接管Checkbox的checked状态，手动设置checked或defaultChecked会被Form的字段值覆盖，得通过Form提供的转换能力实现状态反转。以下两种方法可以解决：

方法一：用normalize转换字段值 #

通过FormItem的normalize属性，在初始化和用户交互时自动反转值，让Form存储的字段值和Checkbox状态保持反向关联：

<FormItem
  label="Include skills list in the search"
  labelCol={{ span: 24 }}
  initialValue={false}
  name="ignoreSkills"
  // 反转Checkbox的状态值，存入Form字段
  normalize={(value) => !value}
>
  <Checkbox>Search on Skills</Checkbox>
</FormItem>

• 初始化时，initialValue={false}经过normalize转换后，Checkbox的checked状态为!false=true（选中），符合需求；
• 用户点击Checkbox时，会把当前checked值反转后存入Form的ignoreSkills字段，实现状态反向同步。

方法二：用getValueProps直接映射状态 #

通过getValueProps手动定义Form字段值到Checkbox属性的映射关系，直接控制checked状态：

<FormItem
  label="Include skills list in the search"
  labelCol={{ span: 24 }}
  initialValue={false}
  name="ignoreSkills"
  getValueProps={(value) => ({
    // 把Form字段值反转后作为Checkbox的checked状态
    checked: !value
  })}
>
  <Checkbox>Search on Skills</Checkbox>
</FormItem>

这种方式更直观，明确指定Form中ignoreSkills的值为false时，Checkbox的checked为true（选中）；值为true时，checked为false（未选中）。

注意事项 #

不要在Checkbox组件上手动设置checked或defaultChecked，因为FormItem会优先使用自身管理的字段值控制Checkbox状态，手动设置的属性会被覆盖，这也是你之前尝试失效的原因。

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