help_user/src/bootstrap/InputGroup.tsx

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


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

    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 className={"col-"+(this.props.col||7)+" ml-auto mr-auto mt-3"}>
                <InputGroup.Prepend>
                    <InputGroup.Text id={this.props.name}>{this.props.desc}</InputGroup.Text>
                </InputGroup.Prepend>
                <FormControl className={this.valid()} type={this.props.type} as={this.props.as} placeholder={'请输入'+this.props.desc} aria-describedby={this.props.name} value={this.props.value}
                             onChange={(e)=>this.props.onChange(e.target.value)} maxLength={this.props.maxLength }/>
                <div className="valid-feedback text-center">
                    {this.merge().valid}
                </div>
                <div className="invalid-feedback text-center">
                    {this.merge().invalid}
                </div>
            </InputGroup>
        );
    }
}