React多层级表单

最新推荐文章于 2025-08-21 23:36:32 发布

weixin_30765505

最新推荐文章于 2025-08-21 23:36:32 发布

阅读量844

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/zling-gnilz/p/10757151.html

因项目需要封装的组件，组件库使用的是Ant Design

? 项目地址 :

? Github地址(React Multi-level Form)：https://github.com/zlinggnilz/react-multi-level-form

? 在线示例：https://codesandbox.io/s/clever-montalcini-litjo

? 说明 :

用到了 Form组件 , 布局组件，表单控件，如果没有使用Ant Design，可以用rc-form代替，需要对组件中使用的表单控件和布局进行替换。

example示例待完善，参数可参考组件中的proptypes

需要formAttr表述层级结构，data为表单原始值，默认为 { }，表单最终提交的是对应层级结构的Object，如：

formAttr:

const formAttr = [
  {
    label: '游乐园',
    key: 'park',
    multi: true,
    children: [
      { label: '名称', key: 'name' },
      { label: '地点', key: 'location', required: false },
      { label: '评分', key: 'rate', type: 'int' }
    ]
  }
];

js:

<MultiForm formAttr={formAttr} data={{}} onSubmit={this.handleSubmit} loading={loading} />

页面显示:

Submit Data:

{
  "park": [
    {
      "name": "名称1",
      "location": "地址1",
      "rate": 4
    },
    {
      "name": "名称2",
      "location": "地点2",
      "rate": 5
    }
  ]
}

? 参考 :