antd3 和 react hook 怎么写form表单

在Antd3中，可以使用`Form`组件和`FormItem`组件来创建表单。具体步骤如下：

1. 引入`Form`和`FormItem`组件以及需要的表单控件组件。

import { Form, Input, Button } from 'antd';
const FormItem = Form.Item;

2. 定义表单的初始值和验证规则。

const initialValues = {
  username: '',
  password: '',
};

const validateRules = {
  username: [{ required: true, message: 'Please input your username!' }],
  password: [{ required: true, message: 'Please input your password!' }],
};

3. 在组件中使用`Form`组件，并在其中添加`FormItem`组件和表单控件组件。其中，`getFieldDecorator`方法用来连接表单控件和表单数据，并设置验证规则。

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

  const handleSubmit = (e) => {
    e.preventDefault();
    form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  return (
    <Form form={form} initialValues={initialValues} onSubmit={handleSubmit}>
      <FormItem label="Username">
        {form.getFieldDecorator('username', {
          rules: validateRules.username,
        })(<Input />)}
      </FormItem>
      <FormItem label="Password">
        {form.getFieldDecorator('password', {
          rules: validateRules.password,
        })(<Input.Password />)}
      </FormItem>
      <FormItem>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </FormItem>
    </Form>
  );
};

而在使用React Hook的情况下，可以使用`useState`来存储表单数据和`useEffect`监听变化。具体步骤如下：

1. 定义表单的初始值和验证规则。

const initialValues = {
  username: '',
  password: '',
};

const validateRules = {
  username: [{ required: true, message: 'Please input your username!' }],
  password: [{ required: true, message: 'Please input your password!' }],
};

2. 使用`useState`来存储表单数据。

const [formValues, setFormValues] = useState(initialValues);

3. 在组件中使用表单控件组件，并设置onChange事件来更新表单数据。

const MyForm = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Received values of form: ', formValues);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <Input
          type="text"
          name="username"
          value={formValues.username}
          onChange={(e) =>
            setFormValues({ ...formValues, username: e.target.value })
          }
        />
      </label>
      <br />
      <label>
        Password:
        <Input.Password
          name="password"
          value={formValues.password}
          onChange={(e) =>
            setFormValues({ ...formValues, password: e.target.value })
          }
        />
      </label>
      <br />
      <Button type="primary" htmlType="submit">
        Submit
      </Button>
    </form>
  );
};