input组件

import React from 'react'
import classes from './Input.css'

const input = (props) => {
    let inputElement = null

    switch (props.elementType) {
        case ('input'):
            inputElement = <input
                className={classes.InputElement}
                {...props.elementConfig}
                value={props.value}
                onChange={props.changed}/>
            break
        case ('textearea'):
            inputElement = <textearea
                className={classes.InputElement}
                {...props.elementConfig}
                value={props.value}
                onChange={props.changed}/>
            break
        case ('select'):
            inputElement = (
                <select
                    className={classes.InputElement}
                    value={props.value}
                    onChange={props.changed}>
                    {props.elementConfig.options.map(option => (
                        <option
                            key={option.value}
                            value={option.value}>
                            {option.displayValue}
                        </option>
                    ))}
                </select>
            )
            break
        default:
            inputElement = <input className={classes.InputElement} {...props.elementConfig} value={props.value} />
    }
    return (
        <div className={classes.Input}>
            <label className={classes.Label}>{props.label}</label>
            {inputElement}
        </div>
    )
}

export default input

css

.Input {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.label {
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
}

.InputElement {
    display: block;
    width: 100%;
    outline: none;
    border: 1px solid #ccc;
    background: #ffffff;
    font: inherit;
    padding: 6px 10px;
    box-sizing: border-box;
}

.InputElement:focus {
    outline: none;
    background: #ccc;
}