拖拽表單生成

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對象，保存，可見瀏覽器自動刷新，效果與拖拽生成預覽效果一致。