cjd-parkball/src/components/formBuilder/demo/basic.md

> 中后台业务组件库，中后台就像公园，进入需要买门票（登录），所以以 Parkball(公园球) 命名，公园内必定捕获！作为一个组件库，提供使用方法文档，方便开发者的调用

---
title: 表单生成器的用法
title_en: normal usage for form builder
category: 2
order: 0
---
展示了一个表单生成组件的用法
```jsx

import { FormBuilder, Button } from 'parkball'
const { Fields } = FormBuilder

class Demo extends React.Component {
  handleSubmit({ err, values }, form, e) {
    console.log(err)
  }

  userFields = [{
    type: 'input',
    label: '名字',
    name: 'username',
  }, {
    type: 'radio',
    label: '性别',
    name: 'sex',

    initialValue: 0,
    options: [{
      value: 0,
      label: '女',
    }, {
      value: 1,
      label: '男',
      disabled: true,
    }],
    labelKey: 'label',
    valueKey: 'value',
  }, {
    type: 'date',
    label: '出生日期',
    name: 'birthday',
    initialValue: '2018-07-13',
    getter: (value) => value.format("YYYY-MM-DD"),
    setter: (value) => value.format("YYYY-MM-DD"),
  }, {
    type: 'select',
    name: 'education',
    label: '学历',
    options: [{
      value: 'primary',
      label: '小学',
    }, {
      value: 'junior',
      label: '初中',
    }, {
      value: 'senior',
      label: '高中',
    }, {
      value: 'undergraduate',
      label: '本科',
    }, {
      value: 'master',
      label: '硕士',
    }, {
      value: 'doctor',
      label: '博士',
    }, {
      value: 'postdoctor',
      label: '博士后',
    }]
  }, {
    type: 'textarea',
    label: '简介',
    name: 'introduce',
    initialValue: '个人介绍'
  }]

  fields = [{
    type: 'select',
    name: 'companyName',
    label: '所属企业',
    url: '/api/company/list',
    valueKey: 'name',
    labelKey: 'name',
    hide: [{
      name: 'companyId',
      get: (option) => option.id
    }]
  }, {
    type: 'checkbox',
    label: '爱好',
    name: 'favorite',
    initialValue: ['reading'],
    options: [{
      value: 'chess',
      label: '下棋',
    }, {
      value: 'reading',
      label: '阅读',
    }, {
      value: 'sport',
      label: '运动健身',
    }, {
      value: 'travel',
      label: '旅游',
    }, {
      value: 'movie',
      label: '电影',
    }]
  }, {
    type: 'cascader',
    label: '省市区',
    url: '/api/address/${option.id}/children',
    labelKey: 'name',
    valueKey: 'id',
    name: 'city',
  }, {
    type: 'cascader',
    label: '省市区',
    options: [{
      value: 'zhejiang',
      label: 'Zhejiang',
      children: [{
        value: 'hangzhou',
        label: 'Hangzhou',
      }],
    }, {
      value: 'jiangsu',
      label: 'Jiangsu',
      children: [{
        value: 'nanjing',
        label: 'Nanjing',
      }],
    }],
    name: 'province',
  }, {
    type: 'upload',
    label: '头像',
    url: '/api/file',
    name: 'avatar',
    initialValue: [{
      uid: '-2',
      name: 'yyy.png',
      status: 'done',
      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    }],
  }, {
    type: 'upload',
    url: '/api/file',
    name: 'attachment',
    label: '附件',
    listType: 'text',
  }]

  render() {
    return (
      <FormBuilder
        onSubmit={({ err, values }, form, e) => console.log({ err, values }, form, e)}
      >
        <Button type="secondary" htmlType="submit">保存</Button>
        <Fields fields={this.userFields} column={2} />
        <Fields fields={this.fields} />
        <Button type="secondary" htmlType="submit">保存</Button>
      </FormBuilder>
    )
  }
}

ReactDOM.render(
  <Demo/>,
  mountNode
)
```