使用 React 从 JSON 自动生成表单

TLDR；请带我去查看代码示例

在过去的两年里，我一直在不同的项目中工作，创建不同的表单是一个共同点。今天，我将分享一种基于 JSON 配置创建表单的方法。你需要表单生成器的原因有很多：

你的申请需要很多表格
根据用户区域设置，在表单中显示或不显示项目
您需要获取的用户数据取决于某些配置，例如角色、用户类型等
你的

为了实现这一点，表单的生成将基于传递给表单组件的 JSON 配置对象，以便我们可以创建任意表单组合。

在这个例子中，我不会深入探讨不同的输入类型，但它应该能给你提供一些基础知识，之后你可以根据需求添加更多类型。目前，这个例子只展示如何生成包含<input />任意类型的表单。

对于你来说实现这个<select>例子将是一个很好的练习。😎

让我们首先添加我们将要使用的库：

我们还可以选择性地添加：

您可以在https://codesandbox.io创建您的 PoC

现在我们已经添加了库，我们首先创建一个通用的FormField组件，它将由我们想要生成的每个字段呈现。

表单字段



import React from "react"
import { useField, FieldInputProps } from "formik"
import { Grid, TextField } from "@material-ui/core"

export interface FormFieldProps extends FieldInputProps<""> {
  name: string
  type: string
  label: string
}

const FormField: React.FC<FormFieldProps> = ({
  label,
  ...props
}: FormFieldProps) => {
  const [field, meta] = useField(props)
  return (
    <Grid container>
      <TextField label={label} {...field} {...props} />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </Grid>
  )
}

export default FormField

这将呈现如下内容：

通用形式

现在我们有了第一个通用组件，我们可以创建GenericForm，它将根据配置呈现 FormField 组件。



import React from "react"
import { Form, FormikProps, Formik } from "formik"
import { Button, Box } from "@material-ui/core"

import FormField from "../FormField"
import { FormFieldProps } from "../FormField/FormField.component"

const GenericForm: React.FC<any> = props => {
  const { fields, submitClickCallback } = props.formDefinition
  return fields ? (
    <Formik
      initialValues={{}}
      onSubmit={(values, actions) => {
        submitClickCallback(values)
        actions.setSubmitting(false)
        actions.resetForm()
      }}
    >
      {(props: FormikProps<any>) => (
        <Form>
          {fields.map(({ name, type = "text", label }: FormFieldProps) => (
            <FormField key={name} name={name} type={type} label={label} />
          ))}
          <Box mt={3}>
            <Button type="submit" variant="contained" color="primary">
              Submit
            </Button>
          </Box>
        </Form>
      )}
    </Formik>
  ) : null
}

export default GenericForm

在这种情况下，按钮是默认设置的，但您也可以从配置中设置按钮的数量。

JSON数据结构

现在我们有了 GenericForm 和 GenericField，让我们看看我们的 JSON 配置结构是什么样的......



const formDefinition = {
  fields: [
    {
      name: "firstName",
      label: "First name"
    },
    {
      name: "lastName",
      label: "Last name"
    },
    {
      name: "email",
      type: "email",
      label: "E-mail"
    }
  ],
  submitClickCallback: (values) => {
    // our callback
  }
};

至此，我们已经准备好根据配置文件生成表单所需的一切。要生成表单，我们只需要渲染<Form />组件并传递 JSON 对象，它就会为我们生成表单。

如果我们将这个 JSON 注入到我们的<Form />组件中，布局将如下所示：

创建示例

让我们从创建一个例子开始：



import React from "react"

import { store } from "../../App"
import Form from "../Form"

interface FormProps {
  firstName: string
  lastName: string
  email: string
}

const formDefinition = {
  fields: [
    {
      name: "firstName",
      label: "First name"
    },
    {
      name: "lastName",
      label: "Last name"
    },
    {
      name: "email",
      type: "email",
      label: "E-mail"
    }
  ],
  submitClickCallback: (values: any) => {
    store.dispatch(userSlice.actions.addUser(values))
  }
};

const UserForm = () => <Form formDefinition={formDefinition} />

export default UserForm

在这个例子中，我们正在创建一个<UserForm />组件，但是这个组件不是必需的，您可以在页面/屏幕中呈现表单，<Form formDefinition={myJsonDefinition} />这样做就足以呈现您的表单。

然后，您可以在后端使用一些逻辑根据用户的变量返回 JSON 配置，如前所述：语言环境、不同角色等。

您还想向表单生成器添加什么内容？

您可以在以下位置使用此项目：表单生成器，我在其中添加了Redux并使用了@reduxjs/toolkit

感谢阅读！

鏂囩珷鏉ユ簮锛�https://dev.to/adancarrasco/creating-forms-from-json-using-react-1fpo