如何在Ant Design的Form组件中正确使用Switch？无法获取Switch值求助

问题原因 #

• 绑定了表单字段的Form.Item（带name/valuePropName属性）内部同时包含了Switch和<span>Chargable</span>两个子元素
• 带数据绑定能力的Form.Item默认只会对内部第一个表单控件做值映射，当存在多个子元素且设置了noStyle属性时，绑定逻辑会失效，因此无法正常收集switch字段的值

正确实现方式 #

根据你的布局需求选择对应方案即可：

方案1：直接将Switch作为Form.Item的唯一子元素（推荐） #

将提示文字放到Form.Item的label属性中，代码如下：

<Form form={form} layout="vertical">
  <Form.Item
    label="Description"
    name="description"
    rules={[{ required: true, message: 'Enter a description' }]}
  >
    <Input placeholder="Enter Description" />
  </Form.Item>

  {/* 调整后的Switch绑定代码 */}
  <Form.Item
    label="Chargable"
    name="switch"
    valuePropName="checked"
  >
    <Switch checkedChildren="Yes" unCheckedChildren="No" />
  </Form.Item>

  <Button
    onClick={() => {
      form
        .validateFields()
        .then((values) => {
          form.resetFields()
          onCreate(values)
        })
        .catch((info) => {
          console.log('Validate Failed:', info)
        })
    }}
  >
    Save
  </Button>
</Form>

const onCreate = (values) => {
  // 此时values.switch可以正常获取到布尔类型的开关状态
  console.log(values.switch)
}

方案2：保留Switch右侧文字的布局 #

如果需要保持Switch后面紧跟Chargable文字的布局，将文字移到带绑定属性的Form.Item外部即可：

<Form.Item>
  <Form.Item name="switch" noStyle valuePropName="checked">
    <Switch checkedChildren="Yes" unCheckedChildren="No" />
  </Form.Item>
  <span>Chargable</span>
</Form.Item>

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