Question

我的表单验证遇到问题，我不知道如何解决，在这里他是：

我想检查两个输入是否相同，例如，如果两个邮件输入相等，则检查用户是否拼错了他的邮件但是我想要动态验证，当用户正在编写时，同时检查。

有我的代码：

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

打开控制台并开始写入输入，你会在OnChange函数中看到两个状态永远不相等，因为它像Onchange函数更新不够快，但是如果我放了一个setTimeout，它因为状态是完整的，所以会有效。

Answer 1

setState操作是异步的。

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

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

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

Answer 2

正如Ivan Minakov在answer中解释和演示的那样，setState电话不一定立即生效。也就是说，跟随同步代码不一定会观察到新状态，并且您需要等待回调，因为setState的第二个参数被调用（如果有的话）。

另一种方法可能是将回调作为setState的第一个参数传递，它允许您使用当前状态转换状态。这也可以用来方便地设置状态开关，确定输入是否匹配，例如：

const { name, value } = e.target;

this.setState(state => {
    state[name] = value;

    if (state.mail !== state.confMail) {
        state.error = "Mail and confirmation mail do not match.";
    } else {
        state.error = undefined;
    }

    return state;
});

OnChange表单验证反应

2 个答案: