如何实现Ant design表单组件封装？

目标：自己实现一个antd表单组件

先看下Ant Design官网上给出的表单组件用法：

 import React, { Component } from 'react'
 import { Form, Icon, Input, Button } from 'antd'

 function hasErrors(fieldsError) {
   return Object.keys(fieldsError).some(field => fieldsError[field])
 }

 class HorizontalLoginForm extends React.Component {
   componentDidMount() {
     // To disabled submit button at the beginning.
     this.props.form.validateFields()
   }

   handleSubmit = e => {
     e.preventDefault()
     this.props.form.validateFields((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values)
       }
     })
   };

   render() {
     const {
       getFieldDecorator,
       getFieldsError,
       getFieldError,
       isFieldTouched
     } = this.props.form

     // Only show error after a field is touched.
     const userNameError =
       isFieldTouched('userName') && getFieldError('userName')
     const passwordError =
       isFieldTouched('password') && getFieldError('password')
     return (
       <Form layout='inline' onSubmit={this.handleSubmit}>
         <Form.Item
           validateStatus={userNameError ? 'error' : ''}
           help={userNameError || ''}
         >
           {getFieldDecorator('userName', {
             rules: [{ required: true, message: 'Please input your username!' }]
           })(
             <Input
               prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />}
               placeholder='Username'
             />
           )}
         </Form.Item>
         <Form.Item
           validateStatus={passwordError ? 'error' : ''}
           help={passwordError || ''}
         >
           {getFieldDecorator('password', {
             rules: [{ required: true, message: 'Please input your Password!' }]
           })(
             <Input
               prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />}
               type='password'
               placeholder='Password'
             />
           )}
         </Form.Item>
         <Form.Item>
           <Button
             type='primary'
             htmlType='submit'
             disabled={hasErrors(getFieldsError())}
           >
             Log in
           </Button>
         </Form.Item>
       </Form>
     )
   }
 }

 const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(
   HorizontalLoginForm
 )

 export default WrappedHorizontalLoginForm

组件功能分析：

• 1-每个input输入框被触发后开始做非空校验并提示错误

• 2-表单提交时做表单项校验，全部校验成功则提示登录，否则提示校验失败

• 3-表单项增加前置图标

组件封装思路：

• 1-需要一个高阶函数hoc FormCreate，用来包装用户表单，增加数据管理能力；hoc需要扩展四个功能：getFieldDecorator, getFieldsError, getFieldError, isFieldTouched。获取字段包装器方法getFieldDecorator的返回值是个高阶函数，接收一个Input组件作为参数，返回一个新的组件。这就是让一个普通的表单项，变成了带有扩展功能的表单项(例如：增加该项的校验规则)
• 2-FormItem组件，负责校验及错误信息的展示，需要保存两个属性，校验状态和错误信息，当前校验通过时错误信息为空
• 3-Input组件，展示型组件，增加输入框前置icon
• 4-导出FormCreate装饰后的MForm组件，MForm组件负责样式布局以及提交控制

组件封装步骤：

• 1-完成一个基础的组件MForm，让页面先展示出来

• 2-写一个高阶组件FormCreate对MForm进行扩充，使MForm组件拥有数据管理的能力。

  • 保存字段选项设置 this.options = {}; 这里不需要保存为state，因为我们不希望字段选项变化而让组件重新渲染

  • 保存各字段的值 this.state = {}

  • 定义方法 getFieldDecorator()()，第一个参数传递配置项，第二个参数传入Input组件；第一个参数包括：当前校验项、校验规则 'username',{rules:[require:true,message:'请输入用户名']}

  • 在FormCreate中，克隆一份Input组件，并且定义Input的onChange事件。首先这里需要把已经存在的jsx克隆一份，并修改它的属性，直接修改属性是不允许的；这里在更高级别定义onChange事件，控制元素的值，这样当组件发生变化时，就不用进行组件之间的来回通信。数据变化交给容器型组件去做，低层级的组件只负责展示即可。

• 3-增加提交校验功能

• 4-增加FormItem组件，在表单项触发后做实时校验并提示错误信息

代码：MForm.js

• 以下每一步骤都可以独立运行

• step1 - 搭建基础代码

•  import React, { Component } from 'react'
  
   class MForm extends Component {
     render() {
       return (
         <div>
           用户名：<input type='text' />
           密码：<input type='password' />
           <button>Log in</button>
         </div>
       )
     }
   }
  
   export default MForm

• step2 - 用高阶组件FormCreate对最后导出的MForm组件进行能力扩充；通过表单项组件FormItem展示校验错误信息

•  import React, { Component } from 'react'
  
   // hoc: 包装用户表单，增加数据管理能力及校验功能
   const FormCreate = Comp => {
     return class extends Component {
       constructor(props) {
         super(props)
         this.options = {} // 保存字段选项设置
         this.state = {} // 保存各字段的值
       }
  
       // 处理表单项输入事件
       handleChange = e => {
         const { name, value } = e.target
         this.setState(
           {
             [name]: value
           },
           () => {
             // TODO: 处理状态变化后的校验
             // 由于setState是异步的，所以这里需要在回调函数中处理后续操作
             // 保证状态已经完成改变
           }
         )
       };
  
       getFieldDecorator = (field, option) => InputComp => {
         this.options[field] = option
         return (
           <div>
             {/* 把已经存在的jsx克隆一份，并修改它的属性，直接修改属性是不允许的。
             这里在更高级别定义onChange事件，控制元素的值，这样当组件发生变化时，
             就不用进行组件之间的来回通信 */}
             {React.cloneElement(InputComp, {
               name: field, // 控件name
               value: this.state[field] || '', // 控件值
               onChange: this.handleChange // change事件处理
             })}
           </div>
         )
       };
       render() {
         return (
           <Comp {...this.props} getFieldDecorator={this.getFieldDecorator} />
         )
       }
     }
   }
  
   @FormCreate
   class MForm extends Component {
     render() {
       const { getFieldDecorator } = this.props
  
       return (
         <div>
           用户名：{getFieldDecorator('username', {
             rules: [{ required: true, message: '请填写用户名' }]
           })(<input type='text' />)}
           密码：{getFieldDecorator('password', {
             rules: [{ required: true, message: '请填写密码' }]
           })(<input type='password' />)}
           <button>Log in</button>
         </div>
       )
     }
   }
  
   export default MForm

• step3 - 增加点击提交按钮时校验表单项的逻辑

• import React, { Component } from 'react'
  
  // hoc: 包装用户表单，增加数据管理能力及校验功能
  const FormCreate = Comp => {
    return class extends Component {
      constructor(props) {
        super(props)
        this.options = {} // 保存字段选项设置
        this.state = {} // 保存各字段的值
      }
      // 处理表单项输入事件
      handleChange = e => {
        const { name, value } = e.target
        this.setState(
          {
            [name]: value
          },
          () => {
            // 处理状态变化后的校验
            // 由于setState是异步的，所以这里需要在回调函数中处理后续操作
            // 保证状态已经完成改变
            this.validateField(name)
          }
        )
      };
  
      // 表单项校验，可以引用async-validator库来做校验，这里为了简便直接做非空校验
      validateField = field => {
        // this.options数据格式如下 ↓↓↓
        // {
        //   "username": {
        //     "rules": [{
        //       "required": true,
        //       "message": "请填写用户名"
        //     }]
        //   },
        //   "password": {
        //     "rules": [{
        //       "required": true,
        //       "message": "请填写密码"
        //     }]
        //   }
        // }
        const { rules } = this.options[field]
        const ret = rules.some(rule => {
          if (rule.required) {
            if (!this.state[field]) {
              this.setState({
                [field + 'Message']: rule.message
              })
              // this.state数据格式如下 ↓↓↓
              // {"username":"","usernameMessage":"","password":"","passwordMessage":""}
              return true // 校验失败，返回true
            }
          }
        })
        if (!ret) {
          // 校验成功，将错误信息清空
          this.setState({
            [field + 'Message']: ''
          })
        }
        return !ret
      };
  
      // 校验所有字段
      validate = cb => {
        const rets = Object.keys(this.options).map(field =>
          this.validateField(field)
        )
        // 如果校验结果数组中全部为true，则校验成功
        const ret = rets.every(v => v === true)
        cb(ret)
      };
  
      getFieldDecorator = (field, option) => InputComp => {
        this.options[field] = option
        return (
          <div>
            {/* 把已经存在的jsx克隆一份，并修改它的属性，直接修改属性是不允许的。
            这里在更高级别定义onChange事件，控制元素的值，
            这样当组件发生变化时，就不用进行组件之间的来回通信 */}
            {React.cloneElement(InputComp, {
              name: field, // 控件name
              value: this.state[field] || '', // 控件值
              onChange: this.handleChange // change事件处理
            })}
          </div>
        )
      };
      render() {
        return (
          <Comp
            {...this.props}
            getFieldDecorator={this.getFieldDecorator}
            validate={this.validate}
          />
        )
      }
    }
  }
  
  @FormCreate
  class MForm extends Component {
    onSubmit = () => {
      this.props.validate(isValid => {
        if (isValid) {
          alert('校验成功，可以登录了')
          console.log(this.props.value)
        } else {
          alert('校验失败')
        }
      })
    };
    render() {
      const { getFieldDecorator } = this.props
      return (
        <div>
          用户名：{getFieldDecorator('username', {
            rules: [{ required: true, message: '请填写用户名' }]
          })(<input type='text' />)}
          密码：{getFieldDecorator('password', {
            rules: [{ required: true, message: '请填写密码' }]
          })(<input type='password' />)}
          <button onClick={this.onSubmit}>Log in</button>
        </div>
      )
    }
  }
  
  export default MForm

• step4 - 增加表单输入时实时校验并提示错误逻辑，封装FormItem组件来展示错误信息，封装Input组件，增加前缀图标。至此，整个MForm组件就编写完成了！

•  import React, { Component } from 'react'
   import { Icon } from 'antd'
  
   // hoc: 包装用户表单，增加数据管理能力及校验功能
   const FormCreate = Comp => {
     return class extends Component {
       constructor(props) {
         super(props)
         this.options = {} // 保存字段选项设置
         this.state = {} // 保存各字段的值
       }
  
       // 处理表单项输入事件
       handleChange = e => {
         const { name, value } = e.target
         this.setState(
           {
             [name]: value
           },
           () => {
             // 处理状态变化后的校验
             // 由于setState是异步的，所以这里需要在回调函数中处理后续操作
             // 保证状态已经完成改变
             this.validateField(name)
           }
         )
       };
  
       // 表单项校验，可以引用async-validator库来做校验，这里为了简便直接做非空校验
       validateField = field => {
         // this.options ↓↓↓
         // {
         //   "username": {
         //     "rules": [{
         //       "required": true,
         //       "message": "请填写用户名"
         //     }]
         //   },
         //   "password": {
         //     "rules": [{
         //       "required": true,
         //       "message": "请填写密码"
         //     }]
         //   }
         // }
         const { rules } = this.options[field]
         const ret = rules.some(rule => {
           if (rule.required) {
             if (!this.state[field]) {
               this.setState({
                 [field + 'Message']: rule.message
               })
               // this.state ↓↓↓
               // {"username":"","usernameMessage":"","password":"","passwordMessage":""}
               return true // 校验失败，返回true
             }
           }
         })
         if (!ret) {
           // 校验成功，将错误信息清空
           this.setState({
             [field + 'Message']: ''
           })
         }
         return !ret
       };
  
       // 校验所有字段
       validate = cb => {
         const rets = Object.keys(this.options).map(field =>
           this.validateField(field)
         )
         // 如果校验结果数组中全部为true，则校验成功
         const ret = rets.every(v => v === true)
         cb(ret)
       };
  
       getFieldDecorator = (field, option) => InputComp => {
         this.options[field] = option
         return (
           <div>
             {/* 把已经存在的jsx克隆一份，并修改它的属性，直接修改属性是不允许的。
             这里在更高级别定义onChange事件，控制元素的值，
             这样当组件发生变化时，就不用进行组件之间的来回通信 */}
             {React.cloneElement(InputComp, {
               name: field, // 控件name
               value: this.state[field] || '', // 控件值
               onChange: this.handleChange, // change事件处理
               onFocus: this.handleFocus
             })}
           </div>
         )
       };
  
       // 控件获取焦点事件
       handleFocus = e => {
         const field = e.target.name
         this.setState({
           [field + 'Focus']: true
         })
       }
  
       // 判断控件是否被点击过
       isFieldTouched = field => !!this.state[field + 'Focus']
  
       // 获取控件错误提示信息
       getFieldError = field => this.state[field + 'Message']
  
       render() {
         return (
           <Comp
             {...this.props}
             getFieldDecorator={this.getFieldDecorator}
             validate={this.validate}
             isFieldTouched = {this.isFieldTouched}
             getFieldError = {this.getFieldError}
           />
         )
       }
     }
   }
  
   class FormItem extends Component {
     render() {
       return (
         <div className='formItem'>
           { this.props.children }
           { this.props.validateStatus === 'error' && (
             <p style={ { color: 'red' } }>{ this.props.help}</p>
           )}
         </div>
       )
     }
   }
  
   class Input extends Component {
     render() {
       return (
         <div>
           {/* 前缀图标 */}
           {this.props.prefix}
           <input {...this.props} />
         </div>
       )
     }
   }
  
   @FormCreate
   class MForm extends Component {
     onSubmit = () => {
       this.props.validate(isValid => {
         if (isValid) {
           alert('校验成功，可以登录了')
           console.log(this.props.value)
         } else {
           alert('校验失败')
         }
       })
     };
     render() {
       const { getFieldDecorator, isFieldTouched, getFieldError } = this.props
       const usernameError = isFieldTouched('username') && getFieldError('username')
       const passwordError = isFieldTouched('password') && getFieldError('password')
  
       return (
         <div>
           <FormItem
             validateStatus={ usernameError ? 'error' : '' }
             help={usernameError || ''}
           >
           用户名：{getFieldDecorator('username', {
               rules: [{ required: true, message: '请填写用户名' }]
             })(<Input type='text' prefix={<Icon type='user' />} />)}
           </FormItem>
           <FormItem
             validateStatus={ passwordError ? 'error' : '' }
             help={passwordError || ''}
           >
           密码：{getFieldDecorator('password', {
               rules: [{ required: true, message: '请填写密码' }]
             })(<Input type='password' prefix={<Icon type='lock' />} />)}
           </FormItem>
           <button onClick={this.onSubmit}>Log in</button>
         </div>
       )
     }
   }
  
   export default MForm

• index.js

• import React from 'react'
  import ReactDOM from 'react-dom'
  import MForm from './components/MForm'
  ReactDOM.render(<MForm />, document.querySelector('#root'))

最终效果：

总结：

• react的组件是自上而下的扩展，将扩展的能力由上往下传递下去，Input组件在合适的时间就可以调用传递下来的值。
• react开发组件的原则是：把逻辑控制往上层提，低层级的组件尽量做成傻瓜组件，不接触业务逻辑。