antd form嵌套标签无法回显

antd form嵌套标签无法回显

问题:form表单如果有嵌套的标签，无法对真正的标签中的数据使用form.setFieldValues 进行回显。

   <Form.Item label="API路径" name="apiUrl" >
        <div className={'tagFormItem'}>
            <Input placeholder="请输入API"/>
        </div>
    </Form.Item>

分析问题：

在 Ant Design 表单中，当你使用 Form.Item 包裹其他组件时，如果直接在 Form.Item 内使用非表单控件组件包裹 Input，可能会导致 setFieldsValue 无法正确回显数据。为了确保表单字段能够正确回显，应该确保 Input 直接作为 Form.Item 的子组件。

方法一：将 Input 直接作为 Form.Item 的子组件

这种方法要求你将 Input 直接放在 Form.Item 内，避免中间多余的 div 包裹。你可以通过自定义样式来达到同样的布局效果。

import { Form, Input, Button } from 'antd';

const Demo = () => {
  const [form] = Form.useForm();

  useEffect(() => {
    // 模拟回显数据
    form.setFieldsValue({
      apiUrl: 'http://example.com/api'
    });
  }, [form]);

  return (
    <Form form={form}>
      <Form.Item label="API路径" name="apiUrl">
        <Input placeholder="请输入API" className='tagFormItem' />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;

方法二：使用 Form.Item 的 getValueProps 和 getValueFromEvent

如果必须使用 div 包裹 Input，你可以通过 Form.Item 的 getValueProps 和 getValueFromEvent 来自定义数据的获取和设置方式。

import { Form, Input, Button } from 'antd';

const Demo = () => {
  const [form] = Form.useForm();

  useEffect(() => {
    // 模拟回显数据
    form.setFieldsValue({
      apiUrl: 'http://example.com/api'
    });
  }, [form]);

  return (
    <Form form={form}>
      <Form.Item
        label="API路径"
        name="apiUrl"
        getValueProps={value => ({ children: <Input value={value} placeholder="请输入API" /> })}
        getValueFromEvent={e => e.target.value}
      >
        <div className="tagFormItem"></div>
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;

方法三：使用自定义表单组件

你可以创建一个自定义的表单组件来封装你的 Input 和 div 逻辑，然后在 Form.Item 中使用这个自定义组件。

import { Form, Input, Button } from 'antd';

const CustomInput = ({ value = '', onChange }) => (
  <div className="tagFormItem">
    <Input value={value} onChange={onChange} placeholder="请输入API" />
  </div>
);

const Demo = () => {
  const [form] = Form.useForm();

  useEffect(() => {
    // 模拟回显数据
    form.setFieldsValue({
      apiUrl: 'http://example.com/api'
    });
  }, [form]);

  return (
    <Form form={form}>
      <Form.Item label="API路径" name="apiUrl">
        <CustomInput />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
};

export default Demo;