order: 1 title: 开始使用

toc: content

logo FormRender

npm NPM downloads NPM all downloads PRs Welcome

一站式中后台 表单解决方案

简介

FormRender 1.0 是下一代的 React.js 表单解决方案。项目从内核级别进行了重写，为了能切实承接日益复杂的表单场景需求。我们的目标是以强大的扩展能力对表单场景 100%的覆盖支持，同时保持开发者能快速上手，并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上，我们做了一系列的取舍，详见 0.x - 1.0 迁移文档。

安装

FormRender 依赖 ant design，单独使用不要忘记同时安装 antd。

  1. npm i form-render --save

最简 demo

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React from 'react';
  6. import { Button } from 'antd';
  7. import FormRender, { useForm } from 'form-render';
  9. const schema = {
  10.   type: 'object',
  11.   properties: {
  12.     input1: {
  13.       title: '简单输入框',
  14.       type: 'string',
  15.       required: true,
  16.     },
  17.     select1: {
  18.       title: '单选',
  19.       type: 'string',
  20.       enum: ['a', 'b', 'c'],
  21.       enumNames: ['早', '中', '晚'],
  22.     },
  23.   },
  24. };
  26. const Demo = () => {
  27.   const form = useForm();
  28.   const onFinish = (formData, errors) => {
  29.     console.log('formData:', formData, 'errors', errors);
  30.   };
  31.   return (
  32.     <div>
  33.       <FormRender form={form} schema={schema} onFinish={onFinish} />
  34.       <Button type="primary" onClick={form.submit}>
  35.         提交
  36.       </Button>
  37.     </div>
  38.   );
  39. };
  41. export default Demo;

对于使用类组件的同学，可以使用 connectForm 替代 useForm hooks。

  1. /**
  2.  * transform: true
  3.  * defaultShowCode: true
  4.  */
  5. import React from 'react';
  6. import { Button } from 'antd';
  7. import FormRender, { connectForm } from 'form-render';
  8. // import 'antd/dist/antd.css';    如果项目没有对antd、less做任何配置的话，需要加上
  10. const schema = {
  11.   type: 'object',
  12.   properties: {
  13.     input1: {
  14.       title: '简单输入框',
  15.       type: 'string',
  16.       required: true,
  17.     },
  18.     select1: {
  19.       title: '单选',
  20.       type: 'string',
  21.       enum: ['a', 'b', 'c'],
  22.       enumNames: ['早', '中', '晚'],
  23.     },
  24.   },
  25. };
  27. class Demo extends React.Component {
  28.   onFinish = (formData, errors) => {
  29.     console.log('formData:', formData, 'errors', errors);
  30.   };
  32.   render() {
  33.     const { form } = this.props;
  34.     return (
  35.       <div>
  36.         <FormRender form={form} schema={schema} onFinish={this.onFinish} />
  37.         <Button type="primary" onClick={form.submit}>
  38.           提交
  39.         </Button>
  40.       </div>
  41.     );
  42.   }
  43. }
  45. export default connectForm(Demo);

从 demo 中我们不难发现 FormRender 的一些设计：

  1. 以 schema 来描述表单展示，提交方式与 antd v4 的方式类似。
  2. schema 以国际标准的 JSON schema 为基础，同时能够方便使用任何 antd 的 props。
  3. 通过 bind 字段，我们允许数据的双向绑定，数据展示和真实提交的数据可以根据开发需求不同（例如从服务端接口拿到不规则数据时，也能直接使用）。
  4. 使用 {{...}} 书写表达式来完成简单的联动，值得一提的是，这里表达式支持所有 js 语法。FR 还提供自定义组件、dependencies 声明、watch 等工具用于更加复杂的定制。
  5. 可以通过 displayType，labelWidth 等字段轻易修改展示。

高级用法