help_admin/src/ui/InputGroup.tsx

import React from "react";
import {FormControl, InputGroup} from 'react-bootstrap'
import {FormInputProps} from "../entity";


const defaultValid={
    check:false,
    valid:'验证成功',
    invalid:'验证失败'
}
/**
 * bootstrap InputGroup组件封装
 */
export class Input extends React.Component<FormInputProps, { undefined?:undefined }>{

    merge(){
        return {...defaultValid,...this.props.valid}
    }

    valid(){
        if(this.props.valid===undefined||this.props.valid.check===undefined){
            return ""
        }else{
            return this.props.valid.check?'is-valid':'is-invalid'
        }
    }

    render() {
        return (
            <InputGroup style={this.props.style||{}}  className={this.props.className?this.props.className:"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
                <InputGroup.Prepend>
                    <InputGroup.Text className={this.props.prependTextClass?this.props.prependTextClass:""} id={this.props.name}>{this.props.desc}</InputGroup.Text>
                </InputGroup.Prepend>
                <FormControl autoComplete={this.props.name} className={this.valid()} type={this.props.type} as={this.props.as}
                             placeholder={(this.props.placeholder||"").length>0?this.props.placeholder:"请输入"+this.props.desc}
                             aria-describedby={this.props.name} value={this.props.value}
                             onChange={(e)=>this.props.onChange?this.props.onChange(e.target.value):null} maxLength={this.props.maxLength }>
                    {this.props.as==="select"?this.props.options?this.props.options.map(option=>option):null:null}
                </FormControl>
                <div className="valid-feedback text-center">
                    {this.merge().valid}
                </div>
                <div className="invalid-feedback text-center">
                    {this.merge().invalid}
                </div>
            </InputGroup>
        );
    }
}