Antd中表单Form.useForm()的使用

通过 Form.useForm 对表单中数据域进行交互

const [form] = Form.useForm()

经过Form.useForm()创建的form实例中，常用的方法如下

1、form.setFieldsValue() 设置表单的值,更新对应的值

// 只更新相对于的，不用输入全部
form.setFieldsValue({
	name:"yi",
	age:1,
})

2、form.getFieldValue() 获取对应字段名的值

const name = form.getFieldValue("name"); // yi
const age = form.getFieldValue("age"); // 1

3、form.getFieldsValue() 获取一组字段名对应的值，并按照对应结构返回

const value = form.getFieldsValue(); {name:"yi",age:1}

4、form.validateFields() 触发表单验证

form.validateFields().then(value => {
	// 验证通过后进入
	const { name, age } = value;
	console.log(name, age); // dee 18
}).catch(err => {
	// 验证不通过时进入
	console.log(err);
});

5、form.submit() 提交表单，与点击 submit 按钮效果相同，会走 onFinish 方法。

<Button onClick={() => form.submit()}>
  提交
</Button>
// 与下面效果一样
<Button htmlType="submit">
  提交
</Button>

6、form.resetFields() 重置一组字段到 initialValues。

form.resetFields();