ant design 4 表单使用-爱代码爱编程

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