1. import React, { useState, useEffect } from 'react';
    2. import { Button, Modal, Switch } from 'antd';
    3. import FormRender, { useForm } from 'form-render';
    5. const Demo = () => {
    6.   const [show, set1] = useState(false);
    7.   const form = useForm();
    9.   const openModal = () => {
    10.     form.setValues({ input1: 'haha' });
    11.     set1(true);
    12.   };
    14.   useEffect(() => {
    15.     form.setValues({
    16.       input1: 'haha2',
    17.       listName: [
    18.         { multiSelect: ['B', 'A'], radioName: 'c', inputName2: 'asf' },
    19.       ],
    20.     });
    21.   }, []);
    23.   return (
    24.     <div>
    25.       <Modal
    26.         destroyOnClose
    27.         visible={show}
    28.         onOk={form.submit}
    29.         onCancel={() => {
    30.           set1(false);
    31.         }}
    32.       ></Modal>
    33.       <FormRender
    34.         displayType="row"
    35.         // debug
    36.         readOnly
    37.         // debugCss
    38.         // mapping={{ '' }}
    39.         form={form}
    40.         schema={schema}
    41.         widgets={{ mymy: Switch }}
    42.       />
    43.       <Button type="primary" onClick={openModal}>
    44.         打开form
    45.       </Button>
    46.       <Button type="primary" onClick={form.resetFields}>
    47.         reset
    48.       </Button>
    49.     </div>
    50.   );
    51. };
    53. export default Demo;
    55. var schema = {
    56.   type: 'object',
    57.   properties: {
    58.     input1: {
    59.       title: '简单输入框',
    60.       type: 'string',
    61.       required: true,
    62.     },
    63.     input2: {
    64.       title: '简单输入框2',
    65.       type: 'object',
    66.       valuePropsName: 'checked',
    67.       widget: 'mymy',
    68.     },
    69.     input3: {
    70.       title: '简单输入框3',
    71.       type: 'html',
    72.       default: 'sfdsfaslfkdj',
    73.     },
    74.     listName: {
    75.       // widget: 'simpleList',
    76.       props: {
    77.         hideTitle: true,
    78.       },
    79.       title: '对象数组',
    80.       description:
    81.         '对象数组嵌套功能对象数组嵌套功能对象数组嵌套功能对象数组嵌套功能对象数组嵌套功能对象数组嵌套功能对象数组嵌套功能对象数组嵌套功能',
    82.       type: 'array',
    83.       items: {
    84.         type: 'object',
    85.         properties: {
    86.           multiSelect: {
    87.             title: '多选',
    88.             description: '下拉多选',
    89.             type: 'array',
    90.             items: {
    91.               type: 'string',
    92.             },
    93.             enum: ['A', 'B', 'C'],
    94.             enumNames: ['杭州', '武汉', '湖州'],
    95.             widget: 'multiSelect',
    96.           },
    97.           radioName: {
    98.             title: '单选select',
    99.             type: 'string',
    100.             enum: ['a', 'b', 'c'],
    101.             enumNames: ['早', '中', '晚'],
    102.             widget: 'select',
    103.             required: true,
    104.           },
    105.           inputName2: {
    106.             title: '复杂输入框',
    107.             description: '英文或数字组合',
    108.             type: 'string',
    109.             min: 4,
    110.             max: 20,
    111.             rules: [
    112.               {
    113.                 pattern: '^[A-Za-z0-9]+$',
    114.                 message: '请输入正确格式',
    115.               },
    116.             ],
    117.           },
    118.         },
    119.       },
    120.     },
    121.   },
    122. };