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

前端

2023-09-06 16:06:21

前言

在前面的文章中，我们一步一步完善了 createForm 的功能，逐步实现了用户数据输入的托管，输入数据的统一管理以及数据的校验。

前面也提到了，createForm 应该支持的功能有一下三点：

数据输入托管 ：将用户输入的数据托管起来，方便后续处理。
数据统一管理 ：将所有输入数据统一管理起来，方便后续的校验和提交。
数据校验 ：对用户输入的数据进行校验，保证数据的正确性和完整性。

在本文中，我们将继续完善 rc-form 的功能，逐步实现以上三点。

实现数据输入托管

首先，我们需要实现数据输入托管。数据输入托管是指将用户输入的数据托管起来，方便后续处理。

为了实现数据输入托管，我们需要创建一个新的组件，叫做 FormItem。FormItem 组件负责托管用户输入的数据。

FormItem 组件的结构如下：

<FormItem>
  <label>姓名：</label>
  <input type="text" name="name" />
</FormItem>

FormItem 组件有两个属性：label 和 name。label 属性是输入框的标签，name 属性是输入框的名称。

当用户在输入框中输入数据时，数据会被托管到 FormItem 组件中。

实现数据统一管理

接下来，我们需要实现数据统一管理。数据统一管理是指将所有输入数据统一管理起来，方便后续的校验和提交。

为了实现数据统一管理，我们需要创建一个新的对象，叫做 FormStore。FormStore 对象负责存储所有输入数据。

FormStore 对象的结构如下：

{
  name: '张三',
  age: 20,
  sex: '男'
}

FormStore 对象的 key 是输入框的名称，value 是输入框的值。

当用户在输入框中输入数据时，数据会被存储到 FormStore 对象中。

实现数据校验

最后，我们需要实现数据校验。数据校验是指对用户输入的数据进行校验，保证数据的正确性和完整性。

为了实现数据校验，我们需要创建一个新的函数，叫做 validateForm。validateForm 函数负责对用户输入的数据进行校验。

validateForm 函数的结构如下：

function validateForm(values) {
  const errors = {};

  if (!values.name) {
    errors.name = '姓名不能为空';
  }

  if (!values.age) {
    errors.age = '年龄不能为空';
  }

  if (!values.sex) {
    errors.sex = '性别不能为空';
  }

  return errors;
}