Forms ReactJS状态是否随延迟而修改？

我正在通过编程验证电子邮件和密码输入，以便简单登录，下面是调用其他验证电子邮件的函数的函数

  handleLogin(event) {
    this.validateEmail();
    this.validatePassword();

    if (this.state.emailValid === 'error' || this.state.passwordValid === 'error') {
      alert('invalid form');
      return;
    };

    const email = ReactDOM.findDOMNode(this.refs.email).value;
    const password = ReactDOM.findDOMNode(this.refs.password).value;
    const creds = { email: email, password: password }
    this.props.onLoginClick(creds)
  }

请注意，首先我调用的是

validateEmail（）

函数，该函数修改指示输入是否正确的存储，下面是

validateEmail（）

源代码：

  validateEmail() {
    const email = ReactDOM.findDOMNode(this.refs.email).value;
    let validEmail = /^.+([.%+-_]\w+)*@\w+([.-]\w+)*\.\w+([-.]\w+)*$/.test(email);

    if (!validEmail) {
      this.setState({
        emailValid: 'error'
      });
      return;
    }
    this.setState({
      emailValid: 'success'
    });
  }

但是在

if

语句中，state.emailValid尚未更新，这是状态修改中的延迟，因此不会显示

警报（）。如何正确获取更新的状态

谢谢
这里要注意的是setState是异步的。在handleLogin方法中同步的所有其他操作完成之前，它不会更新状态

对于React，我喜欢尽可能多地将状态作为真理的单一来源。在上面的示例中，html元素是真实和状态的来源。通过将组件更改为由react状态控制，可以在每次击键时验证表单

表格和受控组件
首先，将输入的状态保持为state

类LoginForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
对,，
};
//我们绑定函数以备不时之需
//子组件中的控件文本
this.emailChange=this.handleEmailChange.bind（this）；
}
电子邮件更改（事件）{
this.setState（{email:event.target.value}）；
}
render（）{
}
}

现在，无论何时键入html输入的状态都将在react中处理。这将使您能够更轻松地检查其有效性。我们可以通过向类中添加另一个方法来实现这一点：

类LoginForm扩展了React.Component{
//…上面所有的东西
validateEmail（）{
让validEmail=/^.+（[.%+-\uuw+*@\w+（[.-]\w+*\.\w+）（[-]\w+*$/.测试（电子邮件）；
如果（！validEmail）{
//Object.assign只是确保了不变性
this.setState（Object.assign（{}，this.state{
emailValid:false
}))
}否则{
//如果使用babel，这也是不可变的
这是我的国家({
……国家，
emailValid:true
})
}
}
//或者。。。。
validateEmail（）{
让validEmail=/^.+（[.%+-\uuw+*@\w+（[.-]\w+*\.\w+）（[-]\w+*$/.测试（电子邮件）；
this.setState（{…state，emailValid:validEmail}）
}
//…渲染方法
}

现在将在每次击键时进行验证。当您需要提交表单时，您所需要做的就是检查数据是否有效并且不需要引用dom。您可以从state发送数据。
setState的可能副本是异步的。即使您的验证函数处于顶部，在完成所有操作之前，状态也不会发生。请从react文档中选择此页，了解状态和单一真实来源，受控组件：