[email protected]和[email protected]有些地方區別還是挺大的。

Form表單的一個常規寫法：

1.通過 Form.useForm 對錶單資料域進行互動。

const [form] = Form.useForm();

<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();