2017-10-28 190 views
1

我是新的React,我只是想与多个输入与react-bootstrap实现窗体验证。我没有想法如何做到这一点。我很困惑如何将验证状态与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 

回答