使用XRender(2)_展示动态的表单

179 阅读1分钟

将默认的schema或者后端返回的schema在页面展示,可进行表单提交

    import { useEffect,  } from 'react';
    import { useDispatch } from 'umi';
    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 NewsManage = () => {
      const form = useForm();
      const dispatch = useDispatch()
      const onFinish = (formData, errors) => {
        console.log('formData:', formData, 'errors', errors);
      };
      
      // 假设从后端请求过来的schema
      useEffect(() => {
        dispatch({
          type: 'designServe/getFormList',
        });
      },[])
      return (
        <div>
          <FormRender form={form} schema={schema} onFinish={onFinish} />
          <Button type="primary" onClick={form.submit}>
            提交
          </Button>
        </div>
      );
    };

    export default NewsManage;

说明:官网纯demo展示,未进行深度探索,待更新