Form组件valuePropName属性工作原理及复选框取值异常问题咨询

问题原因 #

Form.Item 默认会将表单字段的值绑定到子组件的value属性上，而Checkbox组件的状态控制属性不是value，是checked。未设置valuePropName时，Form.Item 会默认监听子组件onChange事件返回值中的value字段更新表单数据，但Checkbox的onChange回调返回的参数仅包含checked状态，没有对应value字段，因此最终表单收集到的Checkbox对应字段值为undefined。

valuePropName 工作逻辑 #

• valuePropName 是 Form.Item 用于指定表单字段值与子组件属性的映射规则的配置项，默认值为value
• 设置自定义valuePropName后会触发两类绑定逻辑：
  1. 表单对应字段的当前值，会绑定到子组件和valuePropName同名的属性上，而非默认的value属性
  2. 监听子组件onChange事件时，会从回调返回的参数中读取和valuePropName同名的字段值，同步更新到表单对应字段中

你给出的示例代码就是明确告知Form.Item，要把remember字段的值和Checkbox的checked属性做双向绑定，因此可以正确读取Checkbox的选中状态：

<Form.Item name="remember" valuePropName="checked">
  <Checkbox>Remember me</Checkbox>
</Form.Item>

补充说明：其他状态属性非value的组件也需要对应配置，比如Switch组件同样需要设置valuePropName="checked"，Upload组件需要设置valuePropName="fileList"。

内容的提问来源于stack exchange，提问作者Alex Alan Nunes