Antd@4.x Form的常用方法

Antd@3.x和Antd@4.x有些地方区别还是挺大的。

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: '${label} is required!',
    types: {
        email: '${label} is not a valid email!',
        number: '${label} is not a valid number!',
    },
    number: {
        range: '${label} must be between ${min} and ${max}',
    },
};

<Form form={form} {...layout} name="nest-messages" onFinish={onFinish.bind(this)} validateMessages={validateMessages} className="login-form"

initialValues={{ name: 'ming', password: '123456' }}

>

    <Form.Item name='name' label="用户名" rules={[{ required: true }]}>
        <Input placeholder="用户名" />
    </Form.Item>

    <Form.Item name='password' label="密码" rules={[{ required: true }]}>
        <Input placeholder="用户密码" />
    </Form.Item>

    <Form.Item >
        <Button type="primary" htmlType="submit" className="login-form-button">
            登录
        </Button>
        <Button >重置表单</Button>
    </Form.Item>
</Form>

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()}> 提交 </Button> // 与下面效果一样 <Button htmlType="submit"> 提交 </Button>

7.重置一组字段到 initialValues。用法:

form.resetFields();

8.获取光标方法：

form.getFieldInstance('name').focus();