前言

通过模仿 rc-form 的实现思路，可以学习一下 hoc 的使用场景。

暴露 createForm() 函数

通过 createForm 函数，返回一个组件。该组件拓展了我们的一些方法。

  1. export function createForm(Cmp) {
  2.   return class extends Component {
  3.     getFieldDecorator = () => {}
  5.     getFieldsValue = () => {}
  7.     getFieldValue = () => {}
  9.     setFieldValue = () => {}
  11.     validateFields = () => {}
  13.     form = () => {
  14.       return {
  15.         getFieldDecorator: this.getFieldDecorator,
  16.         getFieldValue: this.getFieldValue,
  17.         getFieldsValue: this.getFieldsValue,
  18.         setFieldValue: this.setFieldValue,
  19.         validateFields: this.validateFields,
  20.       }
  21.     }
  23.     render() {
  24.       const form = getForm()
  25.       return <Cmp {...this.props} form={form} />
  26.     }
  27.   }
  28. }

实现 getFieldDecorator

使用方法

  1. <div>
  2.   {getFieldDecorator('username', {rules: { require: true, message: '请输入用户名' })(<input placeholder="请输入用户名" />)}
  3. </div>

可以看出，该函数接收两个参数，第一个是字段名，第二个是它的规则。又接着返回了一个接收一个组件的函数，最终返回一个加工后的组件。现在我们开始简单实现一下。

  1. constructor(){
  2.   // ...
  3.   this.state = {}
  4.   this.options = {}
  5. }
  1. getFieldDecorator = (fieldName, option) => InputCmp => {
  2.   // 保存数据和选项
  3.   if (this.state[fieldName] === undefined) this.setState({ [fieldName]: '' })
  4.   this.options[fieldName] = option
  5.   // 返回一个处理后的组件
  6.   return React.cloneElement(InputCmp, {
  7.     name: fieldName,
  8.     value: this.state[fieldName],
  9.     onChange: this.handleChange,
  10.   })
  11. }

定义 handleChange 事件

  1. handleChange = (e) => {
  2.   const { name, value } = e.target
  3.   this.setState({ [name]: value })
  4. }

实现 getFieldValue

直接把 state 的数据返回即可

  1. getFieldsValue = () => {
  2.   return {...this.state}
  3. }

实现 getFieldsValue

通过传进来的名字，返回对应的数据

  1. getFieldValue = name => {
  2.   return this.state[name]
  3. }

实现 setFieldValue

直接将传进来的数据合并起来即可

  1. setFieldValue = state => {
  2.   this.setState(state)
  3. }

实现 validateFields

该方法接收一个回调函数，通过遍历options的规则，在判断相应的值，返回错误数据以及state的数据

  1. validateFields = callback => {
  2.   const err = []
  3.   for (let fieldName in this.options) {
  4.     const rules = this.options[fieldName]?.rules
  5.     const value = this.state[fieldName]
  6.     if(rules && rules.require && rules.message && !value) {
  7.       err.push({
  8.         [fieldName]: rules.message
  9.       })
  10.     }
  11.   }
  12.   // 判断 err 是否有数据
  13.   if (err.length === 0) {
  14.     callback(null, { ...this.state })
  15.   } else {
  16.     callback(err, { ...this.state })
  17.   }
  18. }

最终代码

  1. import React, { Component } from 'react'
  3. export function createForm(Cmp) {
  4.   return class extends Component {
  5.     constructor(props) {
  6.       super(props)
  7.       this.state = {}
  8.       this.options = {}
  9.     }
  11.     handleChange = e => {
  12.       const { name, value } = e.target
  13.       this.setState({ [name]: value })
  14.     }
  16.     validateFields = callback => {
  17.       const err = []
  18.       for (let fieldName in this.options) {
  19.         const rules = this.options[fieldName]?.rules
  20.         if (rules && rules.require && rules.message && !this.state[fieldName]) {
  21.           err.push({
  22.             [fieldName]: rules.message,
  23.           })
  24.         }
  25.       }
  26.       if (err.length === 0) {
  27.         callback(null, { ...this.state })
  28.       } else {
  29.         callback(err, { ...this.state })
  30.       }
  31.     }
  33.     getFieldDecorator = (fieldName, option) => InputCmp => {
  34.       this.options[fieldName] = option
  35.       if (this.state[fieldName] === undefined) this.setState({ [fieldName]: '' })
  37.       return React.cloneElement(InputCmp, {
  38.         name: fieldName,
  39.         value: this.state[fieldName],
  40.         onChange: this.handleChange,
  41.       })
  42.     }
  44.     getFieldValue = name => {
  45.       return this.state[name]
  46.     }
  48.     getFieldsValue = () => {
  49.       return { ...this.state }
  50.     }
  52.     setFieldValue = state => {
  53.       this.setState(state)
  54.     }
  56.     getForm = () => {
  57.       return {
  58.         getFieldDecorator: this.getFieldDecorator,
  59.         getFieldValue: this.getFieldValue,
  60.         getFieldsValue: this.getFieldsValue,
  61.         setFieldValue: this.setFieldValue,
  62.         validateFields: this.validateFields,
  63.       }
  64.     }
  66.     render() {
  67.       const form = this.getForm()
  68.       return <Cmp {...this.props} form={form} />
  69.     }
  70.   }
  71. }