react antd根据json数据自动生成表单

最新推荐文章于 2025-11-07 01:11:03 发布

原创最新推荐文章于 2025-11-07 01:11:03 发布 · 2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

React 同时被 2 个专栏收录

12 篇文章

订阅专栏

antd

8 篇文章

订阅专栏

该博客展示了如何使用Ant Design库在React应用中动态渲染表单组件，并处理不同类型的输入，如InputNumber、DatePicker、RadioGroup和Select。代码示例包括了根据数据格式创建表单元素、设置默认值、处理表单验证以及响应式布局。此外，还涵盖了按钮的自定义事件处理，如提交、导出和取消操作。

一、代码部分

import React, { Component } from 'react';
import { Form, InputNumber, Input, DatePicker, Button, Select, Radio } from 'antd';
import moment from 'moment';
import ExportTableCpn from './ExportTableCpn';
// 推荐在入口文件全局设置 locale
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const FormItem = Form.Item;
const { TextArea } = Input;
const Option = Select.Option;

// 后台返回的数据格式
const data = [
    {
        'field': 'jobid',
        'text': '工号',
        'errorMessage': '请输入工号',
        'required': false,
        'type': 'int',
        'value': 1,
    }, {
        'field': 'date',
        'text': '日期',
        'errorMessage': '请输入日期',
        'required': false,
        'type': 'date',
        'value': '2022-07-17',
    }, {
        'field': 'username',
        'text': '用户名',
        'errorMessage': '请输入用户名',
        'required': false,
        'type': 'char',
        'value': 'hello chen',
    }, {
        'field': 'nameId',
        'text': '姓名',
        'errorMessage': '请输入姓名',
        'required': true,
        'type': 'select',
        'value': '小陈',
        'options': [{ value: 1, label: '小陈' }, { value: 2, label: '小唐' },{ value: 3, label: '小刘' }],
    }, {
        'field': 'sex',
        'text': '性别',
        'errorMessage': '请选择性别',
        'required': true,
        'type': 'radio',
        'value': 0,
        'options': [{ value: 0, label: '男' }, { value: 1, label: '女' }],
    },{
        'field': 'textarea',
        'text': '文本内容',
        'errorMessage': '请输入文本内容',
        'required': false,
        'type': 'textarea',
        'value': '你好啊',
    }
]
// 按钮的数据格式
const btnData = [
    { type: 'primary', name: '确认', htmlType: 'submit' },
    { type: 'primary', name: '上传', htmlType: 'button', event: 'eventExport' },
    { type: 'default', name: '取消', htmlType: 'button', event: 'eventClick' },
]
// formItem css 样式
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
    }
}

// 保存按钮 css 样式
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 24,
            offset: 0,
        },
    }
}

// form css 样式
const formLayout = {
    width: 400,
    marginTop: 100,
    marginLeft: 'auto',
    marginRight: 'auto'
}
// 设置组件的默认值
let defaultValue = {};
for (let i = 0; i < data.length; i++) {
    const { field, value } = data[i];
    // 主要是把时间过滤出去，在这里设置会报错，没有弄明白什么原因
    if (field === 'date') {
        continue;
    }
    defaultValue[field] = value;
}
class FormSearchDemo extends Component {
    constructor() {
        super();
        this.state = {

        }
    }
    /**
     * 根据json数据 dataBtn 中 type 类型生成不同的组件
     * 这个功能还没有实现
     * @param item  json
     * @param Component
     */
    switchBtn(item, index) {
        console.log('switchBtn:', item, index);
        const { htmlType } = item;
        let styleMargin = { margin: '0 10px' };
        switch (htmlType) {
            case 'component':
                return <ExportTableCpn key={index} item={item} />
            case 'submit':
                return <Button style={styleMargin} type={item.type} htmlType={item.htmlType}>{item.name}</Button>
            case 'button':
                return <Button style={styleMargin} type={item.type} htmlType={item.htmlType} onClick={this[item.event]}>{item.name}</Button>
            default:
                return <Button style={styleMargin} type={item.type} htmlType={item.htmlType} onClick={this[item.event]}>{item.name}</Button>
        }
    }

    /**
     * 根据后台返回的 data 中 type 类型生成不同的组件
     * @param item  json
     * @param Component
     */
    switchItem(item) {
        const type = item.type;
        switch (type) {
            case 'int':
                return <InputNumber style={{ width: '100%' }}/>;
            case 'char':
                return <Input allowClear/>;
            case 'date':
                return <DatePicker style={{ width: '100%' }} />;
            case 'textarea':
                return <TextArea autoSize={{
                    maxRows: 5,
                  }}/>;
            case 'radio':
                return (
                    <Radio.Group>
                        {
                            item.options.map((item, index) => {
                                return (<Radio key={index} value={item.value}>{item.label}</Radio>)
                            })
                        }
                    </Radio.Group>
                )

            case 'select':
                return (
                    <Select allowClear>
                        {
                            item.options.map((item, index) => {
                                return (<Option key={index} value={item.value}>{item.label}</Option>)
                            })
                        }
                    </Select>
                )
            default:
                return <Input allowClear/>;
        }
    }
    onFinish = (values) => {
        console.log('onFinish:', values);
    };

    onFinishFailed = (errorInfo) => {
        console.log('onFinishFailed:', errorInfo);
    };
    eventClick = (value) => {
        console.log('eventClick:');
    };
    eventExport = (value) => {
        console.log('eventExport:');
    };
    render() {
        console.log('defaultValue:', defaultValue);
        let itemTime = moment('2022-07-17', 'YYYY-MM-DD');
        // console.log(itemTime);
        return (
            <Form style={formLayout} name="basic"
                onFinish={this.onFinish}
                initialValues={
                    { ...defaultValue, date: itemTime }
                }
                onFinishFailed={this.onFinishFailed}
            >
                {
                    data.map((item, index) => {
                        return (
                            <FormItem
                                key={index}
                                {...formItemLayout}
                                label={item.text}
                                name={item.field}
                                hasFeedback
                                rules={
                                    [{
                                        required: item.required,
                                        message: item.errorMessage
                                    }]
                                }
                            >
                                {
                                    this.switchItem(item)
                                }
                            </FormItem>
                        )
                    })
                }
                <FormItem {...tailFormItemLayout}>
                    {btnData.map((item, index) => {
                        return item.htmlType === 'submit' ?
                            <Button key={index} style={{ margin: '0 10px' }} type={item.type} htmlType={item.htmlType}>{item.name}</Button> :
                            <Button key={index} style={{ margin: '0 10px' }} type={item.type} htmlType={item.htmlType} onClick={this[item.event]}>{item.name}</Button>
                    })}
                </FormItem>
            </Form>
        )
    }
}

export default FormSearchDemo;

二、运行效果

三、点击确认返回的表单数据