from 配置组件

MyFrom文件夹 index.jsx () FromItem.jsx

import React ,{useRef}from 'react'
import style from './style.less'
import FromItem from './FromItem'
import { Form } from 'antd';
const  MyFrom = React.forwardRef((props,fromRef) => {
     const configurevalue = props.configurevalue||[]  
    const onFinish = (values) => {
        props.onFinish(values)
    };
    const onFinishFailed = (errorInfo) => {
        props.onFinishFailed(errorInfo)
    };
    const handleFromItemChange =(value,form_key)=>{
        props.onChange(value,form_key)
    }
    return (
        <div className={style.From}>
           <Form
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
              ref={fromRef}
              {...props}
            >
                {configurevalue.map((_e)=>{
                     return(
                        <Form.Item
                            label={_e.label}
                            key={_e.form_key}
                            name={_e.form_key}
                            {..._e.configure}
                        >
                         <FromItem  configurevalue={_e} onChange={handleFromItemChange} />
                        </Form.Item>
                     ) 
                })}
            </Form>
        </div>
    )
})
export default MyFrom

import React from 'react'
import { Input, Select, DatePicker, TimePicker } from 'antd';
const { Option } = Select;
const { RangePicker } = DatePicker;
export default function FromItem(props) {
    const label = props.configurevalue.label
    const type = props.configurevalue.type
    const fromItemProps = props.configurevalue.fromItemProps
    const handleInputChange = (e) => {
        const value = e.target.value
        const form_key = props.configurevalue.form_key
        props.onChange(value, form_key)
    }
    const handleSelectChange = (e) => {
        const value = e
        const form_key = props.configurevalue.form_key
        props.onChange(value, form_key)
    }
    const handleDatePickerChange = (date, dateString) => {
        const value = dateString
        const form_key = props.configurevalue.form_key
        props.onChange(value, form_key)
    }
    const renderInput = () => {
        return <Input placeholder={`请输入${label}`} {...fromItemProps} onChange={handleInputChange} />
    }
    const renderSelect = () => {
        const data = fromItemProps?.optiondata ?? []
        return (
            <Select placeholder={`请选择${label}`} {...fromItemProps} onChange={handleSelectChange}>
                {data.map((e) => {
                    return <Option value={e.value} key={e.value}>{e.label}</Option>
                })}
            </Select>
        )
    }
    const renderDatePicker = () => {
        return <DatePicker {...fromItemProps} onChange={handleDatePickerChange} />
    }
    const renderRangePicker = () => {
        return <RangePicker  {...fromItemProps} onChange={handleDatePickerChange} />
    }
    const renderTimePicker = () => {
        return <TimePicker   {...fromItemProps} onChange={handleDatePickerChange} />
    }
    const typeMap = {
        input: renderInput(),
        select: renderSelect(),
        DatePicker: renderDatePicker(),
        RangePicker: renderRangePicker(),
        TimePicker: renderTimePicker()
    }
    return (
        <>
            {typeMap[type]}
        </>
    )
}