Antd Form嵌套Switch组件时onFinish无法获取值求助

问题场景 #

使用Antd开发后台门户时，为Switch组件前后添加"Active"和"Inactive"文本，用Space组件包裹布局后，Form提交时handleEdit函数的values中status值为undefined；但移除Space直接将Switch作为Form.Item的子组件时，能正常获取值。

问题原因 #

Antd Form.Item默认只会将直接子组件识别为表单控件并自动收集其值。当你用Space作为Form.Item的直接子组件时，Form.Item无法感知到内部的Switch组件，因此无法收集status字段的值。

解决方案 #

方案一：嵌套无样式的Form.Item（推荐） #

给Switch单独嵌套一个带name和noStyle属性的Form.Item，让外层Form.Item负责显示label和必填校验，内层Form.Item专门绑定字段收集值，完全保留原有布局：

<Form
  labelWrap
  wrapperCol={{ span: 24 }}
  initialValues={detail && detail.object}
  onFinish={handleEdit}
>
  <Row gutter={100}>
    <Col span={12}>
      {/* 外层Form.Item负责展示label和必填标记 */}
      <Form.Item
        labelCol={{ span: 7 }}
        label='Status'
        required
      >
        <Space>
          <p className='text-green'>Active</p>
          {/* 内层无样式Form.Item绑定字段，不影响布局 */}
          <Form.Item
            name='status'
            valuePropName='checked'
            noStyle
          >
            <Switch defaultChecked={detail && detail.object.status} />
          </Form.Item>
          <p className='text-red'>Inactive</p>
        </Space>
      </Form.Item>
    </Col>
  </Row>
</Form>

方案二：手动维护Switch状态 #

如果不想嵌套Form.Item，可以通过useState手动维护Switch的选中状态，提交时将状态合并到表单值中：

import { useState } from 'react';

// 组件内部状态
const [statusChecked, setStatusChecked] = useState(detail?.object?.status);

const handleEdit = async (values) => {
  // 手动将Switch状态合并到表单提交值中
  const submitValues = { ...values, status: statusChecked };
  console.log(submitValues);
};

// 表单部分
<Form
  labelWrap
  wrapperCol={{ span: 24 }}
  initialValues={detail && detail.object}
  onFinish={handleEdit}
>
  <Row gutter={100}>
    <Col span={12}>
      <Form.Item
        labelCol={{ span: 7 }}
        label='Status'
        required
      >
        <Space>
          <p className='text-green'>Active</p>
          <Switch
            checked={statusChecked}
            onChange={setStatusChecked}
          />
          <p className='text-red'>Inactive</p>
        </Space>
      </Form.Item>
    </Col>
  </Row>
</Form>

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