---
title: 分组表单用法
order: 4
---

```jsx
import React, { Component, useState,useRef } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm,YwButton } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
const CustomComponent = ({field,...props}) => {
  // console.log(field,props)
  return <div>自定义组件</div>;
};
const items = [
  {
    component: 'FormGrid',
    componentProps: {
      maxColumns: 3,
    },
    children: [
      {
        title: '输入框',
        name: 'input',
        component: 'Input',
        type: 'string',
        props: {
          labelCol: 12,
        },   
      },
      {
        title: '下拉框',
        name: 'select',
        component: 'Select',
        type: 'string',
        props: {
          fullness: false,
          labelCol: 12,
        },
        enum: [
          { value: 1, label: 1 },
          { value: 2, label: 2 },
        ],
        componentProps: {},
      },
    ],
  },
  {
    title: '分组标题',
    component: 'FormGroup',
    componentProps:{
      subtitle: '说明文字'
    },
    children: [
      {
        title: '自定义组件',
        type:'string',
        name: 'custom',
        // required: true,
        customComponent: CustomComponent,
        componentProps:{
          title:'123',
          default:3333
        }
      },
      {
        type: 'object',
        name: 'dataList',
        title: '自增表格',
        // required: true,
        component: 'ArrayTable',
        props: {
          wrapperCol: 18,
        },
        componentProps: {
          maxRow: 3,
          minRow:1,
          hasAdd: true,
          sortable: true,
          editable: true,
        },
        defaultValue: [{ title1: '123', type2: 1 }],
        children: [
          {
            title: '名称',
            type: 'string',
            name: 'title1',
            component: 'Input',
            required: true,
            editable: false,
          },
          {
            title: '类型',
            name: 'type2',
            type: 'number',
            component: 'Select',
            required: true,
            enum: [
              { value: 1, label: 'AAA' },
              { value: 2, label: 'BBB' },
            ],
          },
        ],
      },
      {
        type: 'object',
        name: 'dataString',
        title: '自增项 (字符串数组) ',
        required: true,
        component: 'ArrayItems',
        props: {
          wrapperCol: 18,
        },
        componentProps: {
          maxRow: 3,
          minRow:1,
          hasAdd: true,
          sortable: false,
          editable: false,
          style: { width: 356 } ,
          itemsType:'string',
        },
        defaultValue:[''],
        children: [
          {
            name: 'title',
            component: 'Input',
            required: true,
            editable: false,
            componentProps:{
               style: { width: 300 } 
            }
          },
        ],
      },
      {
        type: 'object',
        name: 'dataItems',
        title: '自增项 (对象数组) ',
        required: true,
        component: 'ArrayItems',
        componentProps: {
          maxRow: 3,
          minRow:1,
          hasAdd: true,
          sortable: false,
          addText: '添加条目',
          editable: false,
          hasIndex:true,
          style: { width: 356 } 
        },
        defaultValue: [{title:111,startDate:'2022-07-12',endDate:'2022-07-23'}],
        children: [
          {
            name: 'title',
            component: 'Input',
            required: true,
            editable: false,
            componentProps:{
               style: { width: 300 } 
            }
          },
            {
              type: 'array',
              name: '[startDate,endDate]',
              component: 'DateRangePicker',
              required:true,
              defaultValue: ['2022-07-12', '2022-07-23'],
              componentProps: {
                ranges: ['昨天', '今天', '7天', '30天'],
                style: { width: 300 } 
              },
            },
        ],
      },
    ],
  },
];

const App = () =>  {
  const formRef = useRef(null)
  
    return (
      <div>
        <YwJsonForm items={items} scrollIntoView onCreate={(_form)=>{
          formRef.current = _form;
          // _form.setValues({dataString:['']})
        }}/>
      </div>
    );
}

ReactDOM.render(<App />, mountNode);
```