React + antd3.X Form表单 getFieldDecorator、getFieldValue、setFieldValue 、resetFields方法的用法

短命女 2023-01-10 01:23 156阅读 0赞

##### 1、getFieldDecorator #####

使用getFieldDecorator之前，必须先使用 Form.create(\{ \})(Form) 将表单组件包裹起来。

class List extends React.Component { }
    
    // 导出时将组件 List 用 Form.create()包裹起来
    export default Form.create()(List)

经过 Form.create 包装的组件将会自带 this.props.form 属性，通过解构赋值将 form 解构出来；在List组件的 render 函数里面：

const {  form } = this.props;
    const {  getFieldDecorator } = form;

这个方法用于和表单进行双向绑定，它接收两个参数，第一个是表单的字段对象，第二个是校验规则。方法本身返回一个方法，将获取值的标签包裹住。

<Form>
    	<FormItem { ...formItemLayout} label='角色' key='role'>
    		{  getFieldDecorator('role', { 
    			initialValue:'role',
    			rules:[]
    			})(
    				<Input autoComplete="off" placeholder='请输入角色'/>
    			)
    		}
    	</FormItem>
    	<FormItem { ...formItemLayout} label='角色' key='name'>
    		{  getFieldDecorator('list.name', { 
    			initialValue:'list.name',
    			rules:[]
    			})(
    				<Input autoComplete="off" placeholder='请输入角色'/>
    			)
    		}
    	</FormItem>
    </Form>

initialValue：子节点的初始值  
rules：校验规则

##### 2、getFieldValue #####

获取 form 表单里面的值

submit = (e) =>{ 
    	e.preventDefault();
    	const {  form } = this.props;
    	let data = form.getFieldValue(); // 获取所有form 数据
    	let role= form.getFieldValue('role'); // 获取所有role数据
    	let role= form.getFieldValue('list.name'); // 获取所有name数据
    }

getFieldValue 不能获取没有用 getFieldDecorator 绑定的值。

##### 3、setFieldValue #####

设置 form 表单里面的值。

changeValue = () =>{ 
    	const {  form } = this.props;
    	form.setFieldsValue({ 'role':'21'}); //修改role值
    	form.setFieldsValue({ 'list.name':'21'}); //修改name值
    }

setFieldValue 不能设置没有用 getFieldDecorator 绑定的值。

##### 4、resetFields #####

清空 form 表单

handleEmpty = () => { 
    	const {  form } = this.props;
    	form.resetFields();
    }