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

Question

我是 React 新手，我只想通过 react-bootstrap.I 实现多输入表单验证，不知道该怎么做 that.I 我很困惑如何将验证状态与 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

Answer 1

您可以为此使用 react-bootstrap-validation。

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

Answer 2

有一个非常简单的插件：

validate-react