Question

我是新的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

Answer 1

有一个非常简单的插件：

validate-react

Answer 2

您可以使用react-bootstrap-validation。

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

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

2 个答案: