React 在函数组件中使用 Ant-Design 的 Form（form 组件和按钮属于不同的组件）

import React, { Component } from "react";import { Form, Select, Input } from "antd";import PropTypes from "prop-types";const Item = Form.Item;class AddForm extends Component {  constructor(props) {    super(props);    this.state = {};  }  static propTypes = {    setForm: PropTypes.func.isRequired, // 用来传递form对象的函数  };  componentWillMount() {    this.props.setForm(this.props.form); //把form对象传给父亲  }  render() {    const { getFieldDecorator } = this.props.form;    return (      <Form>        <Item>          {getFieldDecorator("username", { <!-- 定义数据名为username，默认值为"" -->            initialValue: "",          })(<Input type="text" placeholder="输入用户名" />)}        </Item>      </Form>    );  }}
export default Form.create()(AddForm);

// 点击添加按钮后触发addCategory = () => {  this.form.validateFields((err, values) => { //从this.form中获取表单的值    if (!err) {      console.log("Received values of form: ", values); //此时获取到子组件表单的值    }  });};
... ...
//在父组件中使用Form子组件<AddForm  setForm={(form) => { //向子组件传递一个方法，这个方法可以改变父组件中this.form的值    this.form = form;    // 在子组件中  form其实就是this.props.form  }}/>

import React, { useState } from "react"; //引入useState
...
const [userData, setUserData] = useState(); //hook
...
// 点击添加按钮后触发const addOk = () => {  userData.validateFields((err, values) => { //此处的 this.form 变成了userData    if (!err) {      console.log("Received values of form: ", values);  //此时获取到值      }    });  setShowModal(0);};
...
//在负组件中使用Form子组件<AddForm  setForm={(form) => {    setUserData(form); //注意，此处不同于class组件，而是使用setUserData    // 在子组件中  form其实就是this.props.form  }}></AddForm>