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

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