Antd Switch切换时未触发Form的onValuesChange回调如何解决？

问题原因 #

Ant Design 的 Form.Item 组件默认仅会对唯一的直接子表单控件自动绑定值同步和事件回调，你的代码里Form.Item下同时存在<Switch />和条件渲染的提示<span>两个子元素，表单无法识别需要绑定的目标控件，因此Switch的状态变更不会同步到Form实例，也就触发不了onValuesChange回调。

解决方案 #

推荐使用嵌套无样式Form.Item的方式单独绑定Switch控件，其余自定义内容放在外层Form.Item下即可，修改后代码如下：

<Form
  layout="vertical"
  form={form}
  onFinish={onSubmit}
  onValuesChange={onValueChanges}
>
  <Form.Item label="Foo">
    {/* 嵌套带noStyle属性的Form.Item单独处理Switch的表单绑定 */}
    <Form.Item
      name="requirePassword"
      valuePropName="checked"
      noStyle
    >
      <Switch />
    </Form.Item>

    {requirePasswordSettingDirty && (
      <span className={styles.requirePasswordWarning}>
        Required password
      </span>
    )}
  </Form.Item>
</Form>

noStyle属性可以让内层的Form.Item不生成额外的DOM结构，不会破坏原有布局样式，同时能正常完成表单字段的绑定逻辑。

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