无压力写表单——React表单方案探索

前端

2023-12-05 06:08:59

最近项目中需要构建我们自己的组件库，关于表单这块，我们一直在探讨如何实现一个更简单的表单方案。之前项目里习惯使用antd的Form表单，也觉得蛮好用的，我们希望能做出更简洁的方案。

手写value和onChange

手写value和onChange是我们解决方案的核心。

在React中，使用受控组件的方式来管理表单数据是比较常见的。在这种方式下，表单组件的状态是由React组件来管理的，而不是由DOM元素本身。

当表单组件的状态发生改变时，React组件会更新DOM元素的值。

同理，当DOM元素的值发生改变时，React组件也会更新表单组件的状态。

这意味着，我们可以通过直接操作DOM元素的值来更新表单组件的状态，而不需要使用onChange事件处理程序。

这种方式的好处是，我们可以避免使用onChange事件处理程序，从而简化表单组件的实现。

当然，这种方式也有一定的缺点。

缺点之一是，我们需要手动处理表单组件的状态更新。

缺点之二是，当表单组件的状态发生改变时，我们无法直接获取到新的状态值。

表单组件的实现

我们的表单组件库目前主要包括以下几个组件：

Form：表单组件，用于管理表单的状态和校验。
Field：字段组件，用于管理单个字段的状态和校验。
Input：输入框组件，用于输入文本。
Textarea：文本域组件，用于输入多行文本。
Select：下拉选择框组件，用于选择一个选项。
Radio：单选框组件，用于选择一个选项。
Checkbox：复选框组件，用于选择多个选项。

表单校验

表单校验是表单组件库中的一个重要功能。

我们的表单组件库提供了两种表单校验方式：

表单级别校验：这种校验方式是针对整个表单进行校验，如果表单中存在不合法的数据，则整个表单都会被认为是无效的。
字段级别校验：这种校验方式是针对单个字段进行校验，如果某个字段的数据不合法，则该字段会被认为是无效的。

示例

以下是一个使用我们的表单组件库构建表单的示例：

import { Form, Field, Input, Button } from "our-form-component-library";

const App = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("表单已提交");
  };

  return (
    <Form onSubmit={handleSubmit}>
      <Field name="name">
        <Input placeholder="姓名" />
      </Field>
      <Field name="email">
        <Input placeholder="电子邮件" />
      </Field>
      <Button type="submit">提交</Button>
    </Form>
  );
};

export default App;