[英]How to do Multiple Input form Validation with React-bootstrap?
我是新的 React,我只想使用 react-bootstrap 实现具有多个输入的表单验证。我不知道该怎么做。我很困惑如何将验证状态与 React-bootstrap 连接起来,在此先感谢.....
import React,{Component} from 'react';
import {FormControl,FormGroup,ControlLabel,HelpBlock} from 'react-bootstrap'
class SignUp extends Component{
getValidationState = () => {
console.log('Am I called');
const length = this.state.value.length;
if (length > 10) return 'success';
else if (length > 5) return 'warning';
else if (length > 0) return 'error';
return null;
}
render(){
return(
<div style={{marginTop:'65px'}} className="container">
<form >
<FieldGroup
id="formControlsText"
type="text"
label="Text"
placeholder="Enter text"
/>
<FieldGroup
id="formControlsEmail"
type="email"
label="Email address"
placeholder="Enter email"
/>
<FieldGroup
id="formControlsEmail"
type="email"
label="Email address"
placeholder="Enter email"
/>
</form>
</div>
)
}
}
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id} validationState="success">
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
{help && <HelpBlock>{help}</HelpBlock>}
</FormGroup>
);
}
export default SignUp
有一个非常简单的插件:
您可以为此使用 react-bootstrap-validation 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.