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

写在前面

前面一篇文章，我们浅谈了一下高阶组件，并实现了 createForm 的一部分功能
getFieldDecorator 是我们实现的 createForm 中的第一个 API，它是统一托管数据的输入的逻辑
既然我们托管了数据的输入，那么很轻易的就可以实现输入数据的集中管理，就是将所有数据都存放在 createForm 返回的新组件的 state 中
今天这篇文章，我们将尝试应用 createForm 写一个 demo，来验证我们所实现的功能

验证 createForm 与 getFieldDecorator

老规矩，我们先看下下面的 demo 代码

import React, { Component } from "react";
// import { createForm } from "rc-form";
import { createForm } from "./components/createForm";
import { Input } from "./components/Input";

@createForm
export class MyCreateFormDemo extends Component {
  renderField = (type) => {
    const { form } = this.props;

    return form.getFieldDecorator(type)(
      <Input placeholder={type} />
    );
  };

  render() {
    const { form } = this.props;
    console.log(form);

    return (
      <div>
        {this.renderField("user")}
        {this.renderField("pwd")}
      </div>
    );
  }
}

上面的代码中，使用了装饰器的用法 @createForm，去装饰我们的 MyCreateFormDemo 组件，MyCreateFormDemo 是模拟的实际项目中的 form 组件
按照 createForm 实现细节，MyCreateFormDemo 接收的 props 中有一个 form 对象
form 对象则提供了 getFieldDecorator 方法去装饰我们的数据输入组件
为了代码的简介和优雅，我们封装了一个 renderField 方法，用于生成新的数据输入组件
其中 Input 组件是简单封装的一个 input 元素，下面是它的代码

import React, { Component } from "react";

const MyInput = (props) => <input style={{ outline: "none" }} {...props} />;

export class Input extends Component {
  render() {
    const { value = "", ...otherProps } = this.props;
    return (
      <div style={{ padding: 10 }}>
        <MyInput value={value} {...otherProps}></MyInput>
      </div>
    );
  }
}

上面简单封装了一个 Input 组件，用于模拟，我们实际项目中的数据输入的组件
运行代码，下面的页面的展示
尝试输入一些数据，比如 hello world，我们看下页面的展示，如果不出意外，会是下面这样的

小结

这篇文章，我们简单写了一个 demo 去验证 createForm 的可用性
后面我们将继续完善 createForm 的功能，并在这个 demo 的基础上进行验证

最后

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

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

写在前面

验证 createForm 与 getFieldDecorator

小结

最后