Antd——Form表单的一个常规写法

Antd——Form表单的一个常规写法：

1.通过 Form.useForm 对表单数据域进行交互。
const [form] = Form.useForm();
//这里用form要使用在钩子函数里，可以配合react的hook使用，
如果使用react生命周期开发的话可以给form表单添加ref来获取表单数据或者修改数据，（this.formRef = React.createRef();）
获取表单数据：this.formRef.current.getFieldsValue()。this.formRef.current.validateFields().then().catch()

const layout = {
labelCol: { span: 8 },
wrapperCol: { span: 16 },
};

const validateMessages = {
required: ‘KaTeX parse error: Expected '}', got 'EOF' at end of input: … email: '{label} is not a valid email!’,
number: ‘KaTeX parse error: Expected 'EOF', got '}' at position 38: … number!', }̲, number: {…{label} must be between ${min} and ${max}’,
},
};

2.获取对应字段名的值。用法：
form.getFieldValue(‘name’)；
form.getFieldValue(‘password’)

3.设置表单的值，更新对应的值，用法：
form.setFieldsValue({
name: ‘ming’,
password: ‘111222’
});

4.获取Form全部字段名对应的值，会按照对应结构返回。用法：
form.getFieldsValue()

5.触发表单验证。用法：
form.validateFields().then(value => {

// 验证通过后进入 const { name,password} = value; console.log(name, password);

}).catch(err => { // 验证不通过时进入 console.log(err); });
6.提交表单，与点击 submit 按钮效果相同，会走 onFinish 方法。用法：
<Button onClick={() => form.submit()}> 提交 // 与下面效果一样 提交

7.重置一组字段到 initialValues。用法:
form.resetFields();

8.获取光标方法：
form.getFieldInstance(‘name’).focus();