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`

`;