拖拽表单生成

1. 创建一个文件夹并进入

mkdir xxx

cd xxx

2.在xxx文件夹中初始化Umi环境（Umi是集成React的开发环境)

pnpx @umijs/create-umi-app

3.安装依赖，执行pnpm i

4.安装拖拽生成表单库FormRender

pnpm add form-render

5.用vscode打开项目，把默认的index.tsx内容替换成如下(以下为FormRender官方提供的示例)

import React from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';

const schema = {
  type: 'object',
  properties: {
    input1: {
      title: '简单输入框',
      type: 'string',
      required: true,
    },
    select1: {
      title: '单选',
      type: 'string',
      enum: ['a', 'b', 'c'],
      enumNames: ['早', '中', '晚'],
    },
  },
};

const Demo = () => {
  const form = useForm();
  return (
    <div>
      <FormRender form={form} schema={schema} />
      <Button type="primary" onClick={form.submit}>
        提交
      </Button>
    </div>
  );
};

export default Demo;

6.执行npm run start，在浏览器看到运行效果

7.打开https://x-render.gitee.io/tools/generator这个页面，开始拖拽生成表单，其中，ID填写服务端将接收到的字段名(建议英文)，标题填写用户最终可见的提示名称

 

 

8. 拖拽生成好以后点击导出schema按钮，把导出的内容替换掉示例代码中的schema对象，保存，可见浏览器自动刷新，效果与拖拽生成预览效果一致。