npm 包 cra-form-builder 使用教程

介绍

cra-form-builder 是一款基于 React 和 Ant Design 的表单构建工具。该工具可以让你快速构建符合 Ant Design 风格的表单，并且支持表单校验以及自定义表单项。cra-form-builder 采用了通用的表单数据结构，使得表单数据的处理更加便捷。

安装

使用 npm 安装：

npm install cra-form-builder

或者使用 yarn 安装：

yarn add cra-form-builder

使用

引入组件

import FormBuilder from 'cra-form-builder'

渲染表单

<FormBuilder
  formItems={formItems}
  formRules={formRules}
  onSubmit={onSubmit}
  initialValues={initialValues}
/>

属性说明

• formItems: 表单项的配置数组，具体格式如下：

[
  {
    label: '姓名',
    name: 'name',
    type: 'text',
    placeholder: '请输入姓名',
    required: true
  },
  {
    label: '性别',
    name: 'gender',
    type: 'radio',
    options: [
      {
        label: '男',
        value: 'male'
      },
      {
        label: '女',
        value: 'female'
      }
    ],
    required: true
  },
  // ...
]

• formRules: 表单项的校验规则，具体格式可以参考 Ant Design 的校验规则，例如：

{
  name: [{ required: true, message: '请输入姓名' }],
  gender: [{ required: true, message: '请选择性别' }]
}

• onSubmit: 提交表单的回调函数，可以在该函数中对表单数据进行处理。例如：

const onSubmit = (values: any) => {
  console.log(values);
};

• initialValues: 表单项的初始值，具体格式与 formItems 中一致。

自定义表单项

我们可以通过 customItems 属性来自定义表单项。

import FormBuilder, { InputItem } from 'cra-form-builder';

const customItems = {
  myInput: InputItem, // 使用默认的 InputItem 组件
  myTextarea: (props: any) => <Input.TextArea {...props} />, // 使用 Ant Design 的 TextArea 组件
  // ...
};

<FormBuilder
  formItems={formItems}
  formRules={formRules}
  onSubmit={onSubmit}
  initialValues={initialValues}
  customItems={customItems}
/>

示例代码

import FormBuilder, { InputItem } from 'cra-form-builder'
import { Button } from 'antd'
import './App.css'

const formItems = [
  {
    label: '姓名',
    name: 'name',
    type: 'text',
    placeholder: '请输入姓名',
    required: true
  },
  {
    label: '性别',
    name: 'gender',
    type: 'radio',
    options: [
      {
        label: '男',
        value: 'male'
      },
      {
        label: '女',
        value: 'female'
      }
    ],
    required: true
  },
  {
    label: '爱好',
    name: 'hobbies',
    type: 'checkbox',
    options: [
      {
        label: '阅读',
        value: 'reading'
      },
      {
        label: '写作',
        value: 'writing'
      },
      {
        label: '旅游',
        value: 'traveling'
      }
    ]
  },
  {
    label: '自我介绍',
    name: 'introduction',
    type: 'textarea',
    placeholder: '请输入自我介绍',
    required: true
  }
]

const formRules = {
  name: [{ required: true, message: '请输入姓名' }],
  gender: [{ required: true, message: '请选择性别' }]
}

const onSubmit = (values: any) => {
  console.log(values)
}

const initialValues = {
  name: '',
  gender: '',
  hobbies: [],
  introduction: ''
}

const customItems = {
  myInput: InputItem,
  myButton: (props: any) => <Button {...props}>自定义按钮</Button>
}

function App() {
  return (
    <div className="App">
      <FormBuilder
        formItems={formItems}
        formRules={formRules}
        onSubmit={onSubmit}
        initialValues={initialValues}
        customItems={customItems}
      />
    </div>
  )
}

export default App

总结

使用 cra-form-builder 可以轻松、快速地构建符合 Ant Design 风格的表单，并且支持表单校验和自定义表单项。希望本文对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53ca7