技術標籤：前端reactant

ant design 4 表單使用

官網ant design。
1、寫法。

// 引入元件
import {  Form ,Button} from 'antd';
class YourComponent extends React.Component {
    constructor(props){
        super(props);
        // 在這裡建立表單的引用，v3版本通過connet包裝後自動帶有form屬性，
        // 但是v4版本已經不適用，改成了formRef例項方法來獲得表單例項.
        this.formRef =
 
 React.createRef();
        this.state = {
             userInfo:{
                userName:'張三',
                password:'123456'
             }
        }
    }

    // 通過校驗後，提交
    onFinish=(values)=>{
         console.log(values);
         // do something....
    }
    render(){
    let { userInfo }
 
 = this.state;
       return (
         <Form
			onFinish={this.onFinish}
			ref={this.formRef}
			initialValues={{
				...userInfo
			}}>
				<Form.Item
					name="userName"
					label="使用者名稱："
					rules={[
						{ required: true, message: '使用者名稱不能為空' },
						{ max: 20
 
, message: '請輸入20字內的使用者名稱' }]}>
					<Input placeholder="請輸入使用者名稱"/>
				</Form.Item>
				<Form.Item 
				     name="password" 
				     label="密碼：" 
				     rules= {[{required:true,message:'密碼不為空'}]}>
                    <Input placeholder='請輸入密碼'>
                </Form.Item>
                <Form.Item>
					<Button type="primary" htmlType="submit" size="large">
						確認
				    </Button>
				</Form.Item>  
		</Form>		
     )
    }
}

2、initialValues:表單預設值，是一個物件，只有初始化和重置時有效，該物件的欄位要和<Form.Item>裡面的name屬性相同。如圖所示：


3、經常會有這樣的需求（比如點選一個詳情頁，希望可以回填伺服器請求回來的資訊），會發現initialValues不生效。解決方法如下：

this.formRef.current.setFieldsValue({
	...res.data// 這裡是伺服器返回的資訊
})

重新set過之後，就可以渲染上去了~~~

4、對特殊欄位做校驗（比如要判斷使用者名稱的校驗）：

this.formRef.current
	.validateFields([ 'userName' ])
	.then((values) => {
	    // 驗證通過 do sth
	    console.log(values)
	});
	.catch((errorInfo) => {
	    console.log(errorInfo)
    });