如何实现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开发组件的原则是：把逻辑控制往上层提，低层级的组件尽量做成傻瓜组件，不接触业务逻辑。