javascript - OnChange 表单验证 react

Question

我在 React 中遇到表单验证问题，我不知道如何解决，他在这里:

我想检查两个输入是否相同，例如两个邮件输入是否相等，以检查用户是否没有拼写错误他的邮件，但我想要动态验证，当用户写入时，同时检查。

这是我的代码:

https://codesandbox.io/s/1v4xxqjzo3

打开控制台并开始写入输入，您将在 OnChange 函数中看到两个状态永远不相等，因为这就像 Onchange 函数更新不够快，但如果我放置 setTimeout ，它将起作用，因为状态已完成。

Answer 1

setState 操作是异步的。

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

您应该使用setState回调函数来比较输入值:

onChangeInput(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    }, () => console.log(this.state.mail === this.state.confMail));
  }