React表单内容模板

import React, { useState } from "react";
import { Container } from './style';
import { Form, Input, Icon, Upload, message, Button } from 'antd';





//转图片格式
function getBase64(img: any, callback: any) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}

// 上传图片限制
function beforeUpload(file: any) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片必须小于2M');
    }
    return isJpgOrPng && isLt2M;
}

//上传图片承载容器
function UploadImg(props: any) {

    const { imageUrl, loading } = props;
    const uploadButton = (
        <div>
            <Icon type={loading ? 'loading' : 'plus'} />
            <div className="ant-upload-text">上传</div>
        </div>
    );
    return (
        <Upload
            name="avatar"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            beforeUpload={beforeUpload}
            onChange={props.handleChange}
        >
            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
        </Upload>
    )
}


// 承载容器
function BaseInput(props: any) {
    const ItemList: any = props.useItem;

    return (
        <Form labelCol={{ span: 2 }} wrapperCol={{ span: 5 }} onSubmit={() => props.handleSumbit}>
            {
                ItemList.map((item: any, index: number) => {
                    if (item.name === 'input') {
                        return (
                            <Form.Item key={index} label={item.label} >
                                <Input onChange={(e: any) => props.handleInput(e, index)} placeholder={item.itemTips} value={item.itemValue} />
                            </Form.Item>
                        )
                    }
                    if (item.name === 'upload') {
                        const uploadData = {
                            imageUrl: item.imageUrl,
                            loading: item.loading
                        }

                        return (
                            <Form.Item key={index} label={item.label} >
                                <UploadImg {...uploadData} handleChange={(e: any) => props.handleUpload(e, index)}></UploadImg>
                            </Form.Item>
                        )
                    }
                    if (item.name === 'SumbitBtn') {
                        return (
                            <Form.Item key={index} label={item.label} wrapperCol={{ offset: 2 }}>
                                <Button style={{ marginRight: '20px' }} type="primary" onClick={props.handleSumbit}>提交</Button>
                                <Button onClick={props.handleCancel}>取消</Button>
                            </Form.Item>
                        )
                    }
                })
            }
        </Form >
    )

}


//数据控制容器
class SetDefault extends React.Component<any, any>{

    //构造函数
    constructor(props: any) {
        super(props);
        this.state = {
            dataItem: [],
        }
    }

    //加载时获取
    componentDidMount() {
        //获取路由传递的参数
        let type = this.props.location.query.type;
        const customer = [
            {
                label: '客服账号',
                name: 'input',
                itemValue: '',
                itemTips: '请输入客服账号!'
            },
            {
                label: '客服密码',
                name: 'input',//判断为输入框的组件
                itemValue: '',
                itemTips: '请输入客服密码!'
            },
            {
                label: '上传客服logo',
                name: 'upload',
                imageUrl: '',//判断为上传图片的组件
                loading: false
            },
            // {
            //     name: 'SumbitBtn'//判断为提交按钮的组件
            // },
            {
                name: 'AddBtn'//判断为添加按钮的组件
            },
        ]
        const program = [
            {
                label: '小程序账号',
                name: 'input',
                itemValue: '',
                itemTips: '请输入客服账号!'
            },
            {
                label: '小程序密码',
                name: 'input',//判断为输入框的组件
                itemValue: '',
                itemTips: '请输入客服密码!'
            },
            {
                label: '小程序公钥',
                name: 'input',//判断为输入框的组件
                itemValue: '',
                itemTips: '请输入客服密码!'
            },
            {
                label: '小程序私钥',
                name: 'input',//判断为输入框的组件
                itemValue: '',
                itemTips: '请输入客服密码!'
            },
            {
                label: '上传小程序logo',
                name: 'upload',
                imageUrl: '',//判断为上传图片的组件
                loading: false
            },
            {
                name: 'SumbitBtn'//判断为提交按钮的组件
            },
        ]
        //获取路由传递的参数
        if (type === 'customer') {
            this.setState({
                dataItem: customer
            })
        } else {
            this.setState({
                dataItem: program
            })
        }


    }

    //提交数据
    useSumbit = (source: any) => {
        const useData = this.state.dataItem;
        console.log(useData, 11)
        let arr = [];
        useData.forEach((item: any, index: number) => {
            if (item.itemValue) {
                arr.push(item.itemValue)
            }
            if (item.imageUrl) {
                arr.push(item.imageUrl)
            }
        });
        console.log(arr)

    }

    //设置输入框的内容
    useInput = (e: any, index: number) => {
        const dataItem = this.state.dataItem;
        dataItem[index].itemValue = e.target.value;
        this.setState({
            dataItem
        })
    }

    //上传方法
    useUpload = (info: any, index: number) => {
        const dataItem = this.state.dataItem;

        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }

        if (info.file.status === 'done') {
            getBase64(info.file.originFileObj, (imageUrl: any) => {
                dataItem[index].imageUrl = imageUrl;
                dataItem[index].loading = false;
                this.setState({
                    dataItem
                })
            }
            )
        }
    };

    //取消
    useCancel = () => {
        console.log('取消')
    }
   

    render() {
        const { dataItem } = this.state;
        //表单数据
        const handleSet = {
            useItem: dataItem,
            handleInput: this.useInput,
            handleSumbit: this.useSumbit,
            handleUpload: this.useUpload,
        }
     

        return (
            <Container style={{ padding: '12px' }}>
                <BaseInput {...handleSet}></BaseInput>
            </Container>
        )

    }
}


export default SetDefault;

　　

import styled from 'styled-components';

export const Container=styled.div`

`;