antd3 +hook Form

Antd3 provides a hook form that allows you to easily manage and validate form data in a React functional component. To use the hook form, you need to first import it from the Antd3 library.

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

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

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

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        label="Username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="Password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

Here, we import the `useForm` hook from Antd3 and use it to create a new form instance. We then create a form with two form items, one for the username and one for the password. Each form item has a name, label, and rules that define how the form data should be validated. Finally, we render a submit button that will trigger the `onFinish` function when clicked. The `onFinish` function will receive an object with the form data as its argument.