如何使用 React-bootstrap 进行多输入表单验证？

Question

I am new React,I Just want to implement form validation with multiple input with react-bootstrap.I have no Idea How to do that.I am Confused how to connect validation state with React-bootstrap Thanks in advance.....

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

Answer 1

There is a very simple plugin for this:

validate-react

Answer 2

You may use react-bootstrap-validation for that.

https://www.npmjs.com/package/react-bootstrap-validation