Ant Design Modal组件Form元素解决: Warning: Instance created by useForm is not connect to any Form element.！

在 Ant Design Modal 组件中使用 Form 组件：常见问题解答

在 Ant Design 组件库中，Modal 组件是一个用于创建弹出窗口或对话框的强大工具。它经常与 Form 组件结合使用，以便在弹出窗口中收集用户输入。但是，在使用这两个组件时，您可能会遇到一些小问题。

问题：使用 Form.useForm() 创建的 Form 实例未连接到任何 Form 元素

在 Ant Design 4.10.0 版本中，使用 Form.useForm() 创建的 Form 实例可能无法正确连接到 Form 元素。这会导致 React 应用程序中出现警告或问题。

解决方案：

有两种方法可以解决此问题：

1. 使用 Form.create() 方法创建 Form 实例：

import { Form, Button } from 'antd';
import { useForm } from 'antd/lib/form/Form';

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

  // ... Form 逻辑
};

2. 使用 Form.Provider 和 Form.Consumer 组件：

import { Form, Button } from 'antd';
import { useForm } from 'antd/lib/form/Form';

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

  return (
    <Form.Provider value={form}>
      <Form>
        // ... Form 逻辑
      </Form>
    </Form.Provider>
  );
};

其他常见问题解答

1. 如何在 Modal 中关闭 Form？

使用 onOk 或 onCancel 属性。在 onOk 处理程序中，使用 form.submit() 提交表单。在 onCancel 处理程序中，使用 form.resetFields() 重置表单。

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

const Demo = () => {
  const [visible, setVisible] = useState(false);

  const onOk = () => {
    form.submit();
  };

  const onCancel = () => {
    form.resetFields();
    setVisible(false);
  };

  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      <Modal
        visible={visible}
        onOk={onOk}
        onCancel={onCancel}
      >
        <Form>
          // ... Form 逻辑
        </Form>
      </Modal>
    </>
  );
};

2. 如何在 Form 中验证输入？

使用 Form.Item 组件并设置 rules 属性。 rules 属性接受一个数组，其中包含验证规则。如果输入不符合规则，则显示错误消息。

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

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

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      name="basic"
      initialValues={{
        username: '',
        password: '',
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <FormItem
        label="Username"
        name="username"
        rules={[
          {
            required: true,
            message: 'Please input your username!',
          },
        ]}
      >
        <Input />
      </FormItem>
      // ... 其他 Form 项
    </Form>
  );
};

3. 如何在 Form 中使用自定义验证？

使用 Form.Item 组件并设置 validateTrigger 属性为 blur 或 onChange。这将允许您在用户离开输入字段或每次输入更改时触发自定义验证。

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

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

  const validateUsername = (rule, value, callback) => {
    if (!value) {
      callback('Please input your username!');
    } else {
      callback();
    }
  };

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      name="basic"
      initialValues={{
        username: '',
        password: '',
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <FormItem
        label="Username"
        name="username"
        rules={[
          {
            validator: validateUsername,
          },
        ]}
        validateTrigger="blur"
      >
        <Input />
      </FormItem>
      // ... 其他 Form 项
    </Form>
  );
};

4. 如何在 Modal 中使用表单布局？

使用 Form.Item 组件并设置布局属性。布局属性接受一个对象，其中包含布局设置，例如标签位置、控件对齐方式和间距。

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

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

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      name="basic"
      initialValues={{
        username: '',
        password: '',
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      layout="horizontal"
    >
      <FormItem
        label="Username"
        name="username"
      >
        <Input />
      </FormItem>
      // ... 其他 Form 项
    </Form>
  );
};

5. 如何在 Modal 中使用表单提交按钮？

使用 Form.Item 组件并设置提交按钮类型。 submitButton 属性接受一个 HTMLButtonElement 对象，其中包含按钮类型设置。

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

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

  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      name="basic"
      initialValues={{
        username: '',
        password: '',
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <FormItem>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </FormItem>
    </Form>
  );
};