JSON生成Form表单（三）

container表单组件

在实际的项目中，JSON表单提供的表单组件是远远不够的，而且提供表单组件是一件低效的事，目前Ant Design组件库提供的表单组件就已经很实用了。

所以container提供了一套规则来自定义表单组件，来满足实际项目中复杂且灵活的表单组件使用场景，container主要的作用有以下几点：

1. 自定义表单组件，例如图片上传组件
2. 添加表单组件库，例如Ant-Design
3. 处理控制逻辑和联动逻辑

自定义input组件

import {Input} from 'antd'
{formKey: 'test-form',...config: [{type: 'container',dataKey: 'name',label: 'Param',customConfig: {// 自定义的配置},render: (curData, config, {changeFn, changeDataFn, getFocus, loseFocus, JSONForm, error, assistData, data}) => {return {borderColor: !!error ? '#f5222d' : ''}}onChange={event => changeFn(event.target.value)} />}}]
}

render方法

render方法的参数：1：curData，该container组件对应的值2：config，该container的组件配置，config.customConfig是自定义配置，里面可以传入antd的input组件的配置

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！