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