Ant Design表单Form常用方法
程序员文章站
2022-05-13 22:02:08
...
Form.useForm()
通过 Form.useForm 对表单数据域进行交互。用法:
const [form] = Form.useForm();
经 Form.useForm() 创建的 form 控制实例,常用方法如下:
1、form.setFieldsValue()
设置表单的值,更新对应的值,用法:
form.setFieldsValue({
name: 'dee',
age: 18,
});
2、form.getFieldValue()
获取对应字段名的值。用法:
const name = form.getFieldValue('name'); // dee
const age = form.getFieldValue('age'); // 18
3、form.getFieldsValue()
获取一组字段名对应的值,会按照对应结构返回。用法:
const value = form.getFieldsValue(); // {name: 'dee', age: 18}
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();
参考:https://ant.design/components/form-cn/#API
上一篇: Java 冷知识(跟进补充)
下一篇: Ant Design - Table