编写antd配置表单组件

编写antd配置表单组件

整体思路

1. 抽取formitem的配置数组：包含组件类型、名称、label名称，相关的opts和扩展的opts，传递进入组件
2. 组件通过Form.create()进行表单创建，能够带有form属性。并且上层组件引用后能够ref的方式获取form进行操作处理
3. 基于form能够抽取出来，上层组件能够对下层组件进行调用和操作，在此基础上还能够进行扩展配置和扩展功能的实现
4. 组件通过props中获取配置数组，动态生成FormItem的表单元素，实现动态配置表单的功能
5. 组件通过在create中的mapPropsToFields中将外部对象数据data绑定到内部表单Item中了

实例实现代码，基于react和antd，类似的组件实现思路一致

组件js

import React, { PureComponent } from 'react';
import { Row, Form, Input, Col } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import BaseDataForm from '.';// 通用组件
class _BaseDataForm extends PureComponent { // 默认属性
defaultProps = {
fields: [], // 外部传递进来的配置数据
} state = {
} getFromItems = () => {
const { form } = this.props;
const { getFieldDecorator } = form;
const { fields, labelCol, wrapperCol } = this.props;
const children = [];// 定义返回值数组
const fieldsinput = fields || [];
const labelColinput = labelCol || 7;
const wrapperColinput = wrapperCol || 15;
const formItemLayout = {
labelCol: { span: labelColinput },
wrapperCol: { span: wrapperColinput },
};
for (let index = 0; index < fieldsinput.length; index += 1) {
const field = fieldsinput[index];
let item = '';
if (field.type === 'Input' || field.type === 'password') {
// this.props.form.getFieldDecorator(id, options) 使用功能这个包装空间，id等于属性名
item = getFieldDecorator(field.name, field.fieldDecoratorOps)(
<Input {...field.elementOpts} />
);
}
// 拼装表格
children.push(
<Col key={index}>
<FormItem {...formItemLayout} label={field.label}>
{item}
</FormItem>
</Col>
);
}
return children;
} render() {
return (
<Form>
<Row>{this.getFields()}</Row>
</Form>
);
}
}


导入js

// 经过Form.create包装过的组件会自带this.props.form
const BaseDataForm = Form.create({
mapPropsToFields: (props) => {
// 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 Form.createFormField 标记，注意表单项将变成受控组件, error 等也需要一并手动传入
const { fields = [], data = [] } = props;
const values = {};
fields.map(item => {
const fieldName = item.name;
let value = data[fieldName];
if (fieldName.indexOf('.' !== -1)) {
try {
// eslint-disable-next-line no-eval
value = eval('data.' + fieldName);
// 特殊多层结构数据获取值
} catch (error) {
// eslint-disable-next-line no-console
console.error(error);
}
}
if (value !== undefined && value !== null) {
// 特殊数据处理
}
values[fieldName] = Form.createFormField({ value });
return item;
});
return values;
},
})(_BaseDataForm);
export default BaseDataForm;


实例js

class Test extends PureComponent { exampleFields = [
{
type: 'Input',
name: 'test',
label: '输入1',
fieldDecoratorOps: {}, // 表单绑定属性
elementOpts: {}, // 标签属性
},
{
type: 'Input',
name: 'test2',
label: '输入2',
fieldDecoratorOps: {}, // 表单绑定属性
elementOpts: {}, // 标签属性
},
]; saveFormRef = (form) => {
this.form = from;
} getFormData = () => {
return this.form.getFieldsValue();
} render() {
return (
<BaseDataForm
ref={this.saveFormRef} // 通过ref将对应的表单from组件映射出来，能够直接调用
data={{}} // data在创建表单的时候做了一次绑定，这个绑定能够将当前值显示进去
fields={exampleFields}
/>
);
}
}