「这是我参与2022首次更文挑战的第31天，活动详情查看：2022首次更文挑战」。

rc-form

大家都知道，antd3 的 form 组件是基于 rc-form 封装的
尽管现在的 antd4 改写了 form 组件，并且将底层库 rc-form 更换为 rc-field-form
但是 rc-form 是使用了高阶组件来实现的，我们抱着学习的心态，也应该去学习了解 rc-form
学习 rc-form 库的高阶组件的使用的最好方法就是，实现一个最简版本的 rc-form
首先我们确定一下我们想要实现的 rc-form 的功能
- 接管用户数据的输入，并统一管理输入的数据
- 校验输入的数据的正确性
- 提交数据
下面我们就开始实现最简 rc-form

createForm

所谓高阶组件，它其实就是一个函数，这个函数接收一个组件，然后返回包装之后的新组件，高阶组件并不是 react 中的新 api，而是一种复用组件逻辑的高级技巧，也是基于 react 组件的组合特性形成的一种设计模式
在 rc-form 中有一个高阶组件 createForm，它接收我们的 form 组件，返回包装之后的新 form 组件
为了能接管用户数据的输入，createForm 提供了 getFieldDecorator 方法
下面看具体实现

import React, { Component } from "react";

export function createForm(Com) {
  return class NewCom extends Component {
    constructor(props) {
      super(props);

      this.state = {};
    }

    onChange = (e) => {
      const { name, value } = e.target;
      this.setState({ [name]: value });
    };

    getFieldDecorator = (fieldName) => (FieldCom) => {
      return React.cloneElement(FieldCom, {
        name: fieldName,
        value: this.state[fieldName],
        onChange: this.onChange,
      });
    };

    getForm = () => ({
      getFieldDecorator: this.getFieldDecorator,
    });

    render() {
      const { ...otherProps } = this.props;
      const form = this.getForm();

      return <Com {...otherProps} form={form} />;
    }
  };
}

在上面的代码中，createForm 返回的组件 NewCom 最后 render 的还是传入的 Com 组件，只不过增加了一个 form 属性
form 属性是一个对象，里面提供了 createForm 返回的组件中的一些方法
getFieldDecorator 方法是用来接管数据输入组件 FieldCom 的输入逻辑
- 它返回一个函数，这个函数接收当前输入组件的字段名，然后再次返回一个新的函数
- 返回的新的函数，接收的则是 FieldCom 数据输入组件
- 然后通过 React.cloneElement API 复制一份 FieldCom，用作返回的组件
- 返回的组件接收的 props 有：name，value，onChange
- 只要用户输入数据，就会触发 onChange 事件，其数据存储在 NewCom 的 state 中
- 至此完成了 FieldCom 组件的数据托管

小结

到这里我们已经踏出了手写 rc-form 的第一步
高阶组件 createForm 用于接收原始的 form 组件，返回一个新的 form 组件
新的 form 组件通过 getFieldDecorator 接管原始 form 组件的用户数据输入，并将数据存储在新 form 组件的 state 中
下一篇文章，我们将继续完善 createForm，并写一个 demo 应用它

最后

今天的分享就到这里了，欢迎大家在评论区里面进行讨论 👏。
如果觉得文章写的不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰

从 0 开始手写 rc-form（一）

rc-form

createForm

小结

最后