模块化设计，React轻松实现无限表单

2024-01-01 04:39:51

模块化 React 表单设计：构建无限且可维护的表单

构建复杂的表单通常是一项繁琐的任务，涉及大量的重复代码和难以维护的结构。为了应对这些挑战，本文将探索一种模块化 React 表单设计方法，该方法利用 JSON 模版和可复用的组件，从而创建出无限且可维护的表单。

JSON 模版：定义表单结构

JSON 模版为我们提供了定义表单结构的一种灵活且可扩展的方式。这种模版是一种 JSON 对象，其中包含了表单中每个字段的元数据，包括其名称、类型、默认值和验证规则。

{
  "name": {
    "type": "text",
    "defaultValue": "",
    "rules": {
      "required": true,
      "minLength": 3
    }
  },
  "email": {
    "type": "email",
    "defaultValue": "",
    "rules": {
      "required": true,
      "pattern": "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}{
  "name": {
    "type": "text",
    "defaultValue": "",
    "rules": {
      "required": true,
      "minLength": 3
    }
  },
  "email": {
    "type": "email",
    "defaultValue": "",
    "rules": {
      "required": true,
      "pattern": "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    }
  },
  "password": {
    "type": "password",
    "defaultValue": "",
    "rules": {
      "required": true,
      "minLength": 8
    }
  }
}
quot;
    }
  },
  "password": {
    "type": "password",
    "defaultValue": "",
    "rules": {
      "required": true,
      "minLength": 8
    }
  }
}

可复用的组件：抽象表单元素

通过利用可复用的组件，我们可以将表单的各个元素抽象为独立的模块。这使我们能够创建可维护且可扩展的表单，其中每个组件都专注于一个特定的功能。

例如，一个文本字段组件可以用于生成各种文本输入，而一个单选按钮组件可以用于创建一组单选选项。

表单组件：将模版转换为交互式表单

表单组件负责将 JSON 模版转换为交互式表单。它使用 React 的 hook 和表单库（如 react-hook-form）来处理输入验证、表单状态管理和提交。

import { useForm, Controller } from "react-hook-form";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

const Form = ({ schema, onSubmit }) => {
  const { control, handleSubmit } = useForm({
    resolver: yupResolver(schema),
  });

  const submitForm = (data) => {
    onSubmit(data);
  };

  return (
    <form onSubmit={handleSubmit(submitForm)}>
      {Object.keys(schema).map((name) => (
        <Controller
          key={name}
          name={name}
          control={control}
          defaultValue={schema[name].defaultValue}
          render={({ field }) => (
            <TextField
              {...field}
              label={name}
              variant="outlined"
              fullWidth
              margin="normal"
            />
          )}
        />
      ))}
      <Button type="submit" variant="contained" color="primary">
        Submit
      </Button>
    </form>
  );
};