React form content template

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 ( 'image must be less than 2M'); 
    } 
    return isJpgOrPng && isLt2M; 
} 

// Photo container carrier 
function UploadImg (The props: the any) { 

    const {imageUrl, loading =} The props; 
    const uploadButton = ( 
        <div> 
            < icon type = {? loading 'loading': 'PLUS'} /> 
            <div className = "Ant-Upload-text"> upload </ div> 
        </ div> 
    ); 
    return ( 
        <the Upload 
            name = "Avatar" 
            listType = "Picture-Card" 
            className = "Avatar-Uploader" 
            showUploadList to 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}> submitted </ Button>
                                <Button onClick = {props.handleCancel}> cancel </ the Button> 
                            </Form.Item> 
                        ) 
                    } 
                }) 
            } 
        </ Form1> 
    ) 

} 


// control data container 
class SetDefault the extends React.Component <the any, the any> { 

    / / constructor 
    constructor (the props: the any) { 
        Super (the props); 
        this.state = { 
            dataItem: [],
        } 
    } 

    // Get loading 
    componentDidMount () { 
        // Get routing parameters passed 
        let type = this.props.location.query.type ; 
        const Customer = [ 
            {
                label: 'Customer Account', 
                name: 'INPUT', 
                itemValue: '', 
                itemTips: 'Please enter the customer account number'! 
            }, 
            { 
                label: 'customer password', 
                name: 'INPUT', // input box is determined component 
                itemValue: '', 
                itemTips: 'Please enter the customer service code'! 
            }, 
            { 
                label: 'Upload customer logo', 
                name: 'Upload', 
                imageUrl: '', // determines Photo component 
                loading: to false 
            }, 
            {// 
            // name: 'SumbitBtn'// determines submit button assembly 
            //}, 
            {
                name: 'AddBtn' // Add button assembly is determined 
            }, 
        ] 
        const Program = [ 
            { 
                label: 'applet account', 
                name: 'INPUT', 
                itemValue: '', 
                itemTips: '! Please enter the customer account number' 
            } , 
            { 
                label: 'applet code', 
                name: 'iNPUT', // determines that the input box assembly 
                itemValue: '', 
                itemTips: "Please enter the customer service code! ' 
            }, 
            { 
                label:" applets public key'  
                name:'Input', // determines that the input box assembly
                itemValue: '', 
                itemTips: 'Please enter the customer service code!'
            },
            { 
                label: 'applet private', 
                name: 'INPUT', the input determination component // box 
                itemValue: '', 
                itemTips: 'Please enter the customer service code! ' 
            }, 
            { 
                label:' Upload applet logo ', 
                name:' Upload ', 
                imageUrl:' ', // determines Photo component 
                loading: to false 
            }, 
            { 
                name:' SumbitBtn '// determines submit button assembly 
            } 
        ] 
        // get routing parameter passed 
        if (type === 'customer') {
            this.setState({ 
                the 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`

`;