getfielddecorator：了解这个中心是什么

一、getfielddecorator是什么

getFieldDecorator是在ANT DESIGN PRO等组件库中越来越常见的组件。它是ANT DESIGN中一个十分有用的装饰器，能够帮我们处理复杂表单的数据绑定、校验等逻辑。本节将详细介绍getFieldDecorator是什么，它的作用是什么，它是如何工作的。

二、getFieldDecorator的用途

getFieldDecorator的主要作用是将已有的表单控件与数据存储之间建立映射关系。比如Antd的组件，将其装饰成表单的形式，实现数据的双向绑定，使得使用者无需干涉表单的取值存储操作，将表单数据的校验逻辑与控件之间解耦，让验证变得更加简单。比如下面这个例子：

  {getFieldDecorator('username', {
    rules: [{ required: true, message: '请输入用户名' }],
  })(
    <Input
      prefix={}
      placeholder="用户名"
    />
  )}

这段代码中的getFieldDecorator方法会返回一个函数，这个函数接收一个组件作为参数并返回一个新的组件，新的组件包含了原来组件的所有属性和方法，同时将表单控件与数据之间建立了映射关系。

三、getFieldDecorator的参数

getFieldDecorator包含两个参数：fieldId和options，其中fieldId为表单控件的id，options是一个配置对象，里面包含了：

• initialValue：表单的初始值，相当于React中表单组件的defaultValue属性。
• rules：表单数据的校验规则。
• validateTrigger： 表单数据的校验触发方式。
• valuePropName：设置组件值的属性名，默认值是’value’。
• getValueFromEvent：从表单事件中提取值的函数，默认是取event.target.value。
• normalize：规范化表单数据的函数，常用来规范化日期、电话号码等格式化数据。
• trigger：校验时机。

四、getFieldDecorator的工作原理

getFieldDecorator的工作原理与React中的高阶组件类似。首先，它接收一个组件作为参数，然后通过返回另一个新的组件来增强这个组件。具体来说，它在包装后的组件上绑定表单控件的输入事件，从而能够自动处理表单数据的更新、校验等业务逻辑。每当表单数据变化时，getFieldDecorator会根据传入的rules参数，自动将表单数据进行校验，然后将结果返回给包装后的组件，从而实现表单数据的双向绑定。

五、getFieldDecorator的使用技巧

getFieldDecorator的高级使用技巧可以使我们编写更加高效的表单代码。下面列举一些实践经验：

• 使用id来设置formItem的key，这样就可以正确地更新表单数据，同时又能够去除无用的warning。
• 使用动态id来生成可重用的表单项。
• 使用options来简化输入。
• 使用getFieldDecorator还可以结合redux/mobx等状态管理工具一起使用，使表单数据的存储和管理更加方便。

六、getfielddecorator的完整代码示例

下面是getFieldDecorator的完整代码示例：

  const WrappedComponent = Form.create()(class extends React.Component {
    render() {
      const { getFieldDecorator } = this.props.form;
      return (
        
          
            {getFieldDecorator('username', {
              rules: [
                { required: true, message: '请输入用户名' },
                { min: 6, max: 10, message: '用户名长度应为6-10个字符' },
              ],
              initialValue: 'admin',
            })(
              <Input
                prefix={}
                placeholder="用户名"
              />
            )}
          
        
      );
    }
  });

上述代码将一个Form表单组件和一个FormItem组件与getFieldDecorator一起使用，实现了表单数据的双向绑定和校验功能。