Javascript 检查React中的密码验证

我想检查React中Re password的有效性，我为此编写了此代码，但当您设置（例如）PassSwarm:“1234”和Re password:“1234”时，它不会应用为true，但当您为Re password输入第五个字符时，它将变为true。 你知道问题是什么吗

import React , { Component } from 'react'; 

export default class RegistrationForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            email:'',
            password :'',
            password_re:'',
            password_has_error:false
        };
    }


    checkPassword() {
         if(!this.state.password || this.state.password != this.state.password_re) {
            this.setState({password_has_error:true});
        }
        else {
            this.setState({password_has_error:false});
        }
    }

    handleChange(event) {
        this.setState({[event.target.name] : event.target.value });

        if (event.target.name == 'password' || event.target.name == 'password_re')
            this.checkPassword();
    }

    handleSubmit(event) {
        event.preventDefault(); 
        // TODO: will submit the form here
    }

    render(){
        return ( 
            <form onSubmit={(event)=>this.handleSubmit(event)}>
                <div>
                    <label>Name</label>
                    <input 
                        type="text" 
                        name="name" 
                        value={this.state.name} 
                        onChange={(event)=>this.handleChange(event)} 
                        />
                </div>
                <div>
                    <label>Email address</label>
                    <input 
                        name="email"
                        type="email" 
                        value={this.state.email} 
                        onChange={(event)=>this.handleChange(event)} 
                        /> 
                </div>
                <div>
                    <label>Password</label>
                    <input 
                        type="password" 
                        name="password" 
                        value={this.state.password} 
                        onChange={(event)=>this.handleChange(event)} 
                        />

                </div>
                <div>
                    <label>Re-enter password</label>
                    <input 
                        type="password" 
                        name="password_re" 
                        value={this.state.password_re} 
                        onChange={(event)=>this.handleChange(event)} 
                        />
                </div>
                <button type="submit">Submit</button>
            </form>
        ) 
    } 
}

import React，{Component}来自'React'；
导出默认类注册表单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名称：“”，
电子邮件：“”，
密码：“”，
密码\u re:“”，
密码\u有\u错误：false
};
}
检查密码（）{
如果（！this.state.password | | this.state.password！=this.state.password|re）{
this.setState（{password\u has\u error:true}）；
}
否则{
this.setState（{password\u has\u error:false}）；
}
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
如果（event.target.name=='password'| | event.target.name=='password\u re'）
这是checkPassword（）；
}
handleSubmit（事件）{
event.preventDefault（）；
//TODO:将在此处提交表格
}
render（）{
报税表（
this.handleSubmit（event）}>
名称
this.handleChange（事件）}
/>
电子邮件地址
this.handleChange（事件）}
/> 
密码
this.handleChange（事件）}
/>
重新输入密码
this.handleChange（事件）}
/>
提交
) 
} 
}

---

编辑：这是我的React组件

这是因为，setState是异步的，它不会立即更新状态值

使用setState回调方法编写如下代码：

handleChange(event) {
  const { name, value } = e.target

  this.setState({
      [name] : value 
    }, () => {
      if (name == 'password' || name == 'password_re')
        this.checkPassword();
      }
    }
  );
}

---

查看此链接了解更多详细信息。

它工作得非常好，非常感谢您的链接和解释。