You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.6 KiB
45 lines
1.6 KiB
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 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 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(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>
|
|
);
|
|
}
|
|
}
|
|
|