react antd 设置Form表单值 / 清空Form表单 Form.useForm 报错

• 今天使用antd的Form组件时，遇到一个需求，“提交完表单之后需要重置Input框”；
• 照着手册的方法就一直没有成功。。。比如 const [form] = Form.useForm();这句就没有成功过。。。

错误原因

React Hook "Form.useForm" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function

翻译过来大概就是：
· 这是由于useForm 是 React Hooks 的实现，只能用于函数组件 如果是在 Class 组件 下。

解决办法 （一共三个步骤）

需要通过 ref 获取数据域，通过ref获取的控制实例可使用API-FormInstance提供的所有方法，formRef = React.createRef();

话说完了，开始撸代码：

import React, { Component } from 'react'
import { Form, Input, Button } from 'antd';

export default class Test extends Component {
	// 1. ---- 存储Form对象
    formRef = React.createRef();
	
	// 
    onFinish = (formValue) => {
        // ... 
        // 3. ---- 设置Form.Item 组件的值 （也就是输入框中的值）， 键值需要和Form.Item中的name值对应
        this.formRef.current.setFieldsValue({
            "username": "",
            "des": ""
        })
    }

    render() {
        return (
            <div className="comment-add">
                <Form
                    name="CommentAddForm"
                    onFinish={this.onFinish}
                    // 2. ---- 这里需要用 ref 注册一下
                    ref={this.formRef}
                >
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{ required: true, message: '请输入用户名！' }]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="评论内容"
                        name="des"
                        rules={[{ required: true, message: '请输入评论内容！' }]}
                    >
                        <Input.TextArea />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="btn-submit">
                            Add once
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}