antd 4.x.x Form组件 表单提交 值清空问题

Form组件 表单提交时表单内容的控制

目的：表单内容的清空与否，自主控制

未控制情况下

const onFinish = (value) => {
	console.log(value)
}

<Form onFinish={onFinish} >
    <Form.Item name='editValue' >
        <Input.TextArea rows={4} />
    </Form.Item>
    <Form.Item>
        <Button htmlType="submit"  type="primary">
            提交
        </Button>
    </Form.Item>
</Form>

上述代码点击提交之后，表单内容会自动清空。组件会刷新。当提交出问题时，，内容已经丢失，无法在原有基础下再次提交。

使用 form 进行实例化

const [form] = Form.useForm();

const onFinish = (value) => {
	console.log(value)
}

<Form onFinish={onFinish} >
    <Form.Item name='editValue' form={form} >
        <Input.TextArea rows={4} />
    </Form.Item>
    <Form.Item>
        <Button htmlType="submit"  type="primary">
            提交
        </Button>
    </Form.Item>
</Form>

经过实例化后，表单内容变为自主控制，提交操作并不会导致原有内容清空，需要通过 FormInstance 来进行操作

个人见解，欢迎指正