JSON生成Form表单的方法示例

const cOnfig= {
  formKey: 'example-form',
  data: {
    name: '',
    descr: '',
    typeName: ''
  },
  config: [
    {
      type: 'input',
      dataKey: 'name',
      label: 'param',
      placeholder: '请输入param',
      validate: ['required', /^[a-zA-Z_{}0-9]+$/g],
      style: {
        display: 'inline-block',
        width: 270,
      },
    },
    {
      type: 'select',
      dataKey: 'typeName',
      options: ['string', 'integer', 'float'],
      style: {
        display: 'inline-block',
        width: 100,
        margin: '0 15px'
      },
      validate: [{type: 'required', message: 'param类型不能为空'}]
    },
    {
      type: 'textarea',
      dataKey: 'descr',
      placeholder: '请输入param含义',
      label: 'param含义',
      validate: ['required'],
      style: {
        width: 385,
      }
    },
  ]
}

 this.FormWrap = ref} cOnfig={config}>

{
  formKey: 'paramAddForm',
  data: {},
  config: []
}

{
  type: 'input',
  dataKey: 'name',
  label: 'param',
  validate: ['required'],
  style: {}
}

{
  display: 'inline-block',
  width: 200
}

import { Input, Select } from 'antd'
const Option = Select.Option
{
  type: 'container',
  dataKey: 'descr',
  style: {
    display: 'inline-block',
    width: 100,
    margin: '0 15px'
  },
  options: ['string', 'integer', 'float'],
  render: (curData, config, {changeFn, getFocus, loseFocus, error}) => {
    return  changeFn(value, () => {
        loseFocus()
      })}>
      {
        config.options && config.options.map((item, idx) => {item})
      }
    
  }
},

import React from 'react'
import { Input } from 'antd'
export default [
  {
    type: 'antd-input',
    render: (curData, config, {changeFn, getFocus, loseFocus, error}) => {
      return  changeFn(event.target.value)} />
    }
  }
]

import Form from 'Form'
import components from './antd-components'
From.createCustomComp(components)

const cOnfig= {
  formKey: 'paramAddFromAntd',
  data: {
    name: '',
  },
  config: [
    {
      type: 'antd-input',
      dataKey: 'name',
      label: 'Param',
      placeholder: '请输入param',
      validate: ['required', /^[a-zA-Z_{}0-9]+$/g]
    }
  ]
}
 this.FormWrap = ref} cOnfig={config}>

modifyDataFn: ({changeFn, changeDataFn}, {parent, self}) => {
  let {parentData} = parent
  parentData = parentData.map(item => ({
    ...item,
    name: self.curData
  }))
  changeDataFn(parent.parentKey, parentData)
}

{
  data: {},
  assistData: {
    refreshParam: false
  },
  config: [
    {
      type: 'container',
      dataKey: 'assistData.refreshParam',
      render: (curData, config, {changeFn, changeDataFn}) => {
        const handleClick = () => {
          changeDataFn('assistData.refreshParam' ,true)
          setTimeout(() => {
            changeDataFn('assistData.refreshParam' ,false)
          }, 1000 * 3)
        }
        return 
          {
            config.index === config.parentData.length - 1 &&
            
              {!curData && }
            
          }
        
      }
    },
  ]
}

{
  type: 'container',
  dataKey: 'param',
  render: (curData, config, {changeFn, changeDataFn, JSONForm}) => {
    return 

      {
        JSONForm([
          {
            type: 'input',
            dataKey: 'name',
            placeholder: '请输入param',
            validate: ['required'],
          }
        ])
      }
    
  }

function handleClick() {
  this.FormRefs.getValue((valid, data) => {
    // valid 表示校验结果，false表示校验不通过
  })
}

componentDidMount(){
  this.FormRefs.registerSubmit((valid, data) => {
    console.log(valid, data)
  })
}

{
  formKey: '',
  realTimeSubmit: true
}

{
  dataKey: '',
  preventSubmit: true
}