reactjs - 反应在错误的地方更新状态值

Question

我正在尝试在 React 中实现一个简单的表单验证，其中名称的长度应超过 1 个字符，国家/地区的长度应与密码一起超过 2 个字符。但是，密码和国家/地区正在得到正确验证。但是，名称字段没有得到正确验证。首先，如果名称只有 1 个字符长，则允许提交名称，而是在国家/地区的跨度标签中显示错误。另外，我不确定如何实现电子邮件验证的逻辑。这是我的代码：

import React, { Component } from "react";


export default class SignUp extends Component {
    constructor(){
        super();
        this.state={
            name:'',
            country:'',
            email:'',
            pass:'',
            formErrors:{
                nameError:'',
                countryError:'',
                emailError:'',
                passwordError:''
            }
        }
        this.handleChange=this.handleChange.bind(this);
        this.handleValidate=this.handleValidate.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
    }

    handleChange =(e) =>{
        let name=e.target.name;
        let value=e.target.value;
        this.setState({
            [name]:value
        })
    }

    handleValidate= () =>{
        let { name,country,email,pass} =this.state;
        let nameError, countryError, emailError, passError;

        if(!name)
            nameError="Missing name"
        if(name && name.length<2)
            countryError="Length of name should be more than 1 character"

        if(!country)
            countryError="Missing country"
        if(country && country.length<3)
            countryError="Length of country should be more than 2 characters"

       /* if(!email)
            emailError="Email can't be empty"
        let lastAtPosi=email.lastIndexOf('@');
        let lastDotPosi=email.lastIndexOf('.');
        console.log("last @ posti"+lastAtPosi);
        console.log("Last . posi"+lastDotPosi);
        */

        if(!pass)
            passError="Password can't be empty"
        if(pass && pass.length<6)
            passError="Password must be more than 6 characters long"

        this.setState({
            formErrors:{
                nameError:nameError,
                countryError:countryError,
               // emailError:emailError,
                passwordError:passError
            }
        })
        console.log("name "+nameError);
    }

    handleSubmit= (e) =>{
        e.preventDefault();
       this.handleValidate();
    }

    render() {
        const { name, country, email, pass, formErrors } = this.state;
        return (
            <div>

            <form>
                <h3>Sign Up</h3>
                <div className="form-group">
                    <label>Name</label>
                    <input type="text" onChange={this.handleChange}name="name"value={name} className="form-control" placeholder="Enter name" />
                    {formErrors.nameError? <span variant="danger">{formErrors.nameError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Country</label>
                    <input type="text" onChange={this.handleChange}name="country"value={country} className="form-control" placeholder="Enter country" />
                   {formErrors.countryError? <span variant="danger">{formErrors.countryError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Email address</label>
                    <input type="email" onChange={this.handleChange}name="email"value={email} className="form-control" placeholder="Enter email" />
                    {formErrors.emailError?<span variant="danger">{formErrors.emailError}</span>:'valid'}
                </div>

                <div className="form-group">
                    <label>Password</label>
                    <input type="password" onChange={this.handleChange}name="pass" value={pass} className="form-control" placeholder="Enter password" />
                    {formErrors.passwordError?<span variant="danger">{formErrors.passwordError}</span>:'valid'}
                </div>

                <button onClick={this.handleSubmit}type="submit" className="btn btn-primary btn-block">Sign Up</button>

            </form>
            </div>
        );
    }
}

沙盒链接在此处输入链接描述

标签： reactjsecmascript-6

Answer 1

在您的handleValidate中，您将错误分配给错误的错误变量：

if(name && name.length<2)
            countryError="Length of name should be more than 1 character"

它应该是：

if(name && name.length<2)
            nameError="Length of name should be more than 1 character"