如何让 React 从第一个字符开始检查用户输入？答案

【问题标题】：How to make React check the user input from the first character?如何让 React 从第一个字符开始检查用户输入？
【发布时间】：2021-08-24 07:48:35
【问题描述】：

反应应用。授权表格。在用户输入时，我正在检查用户是否写了正确的东西（电子邮件的电子邮件和密码的拉丁字符 + 数字）

问题是，它不是在键入时在浏览器中显示结果，而是在一个字符之后显示。例子：

应该从第一个字符开始检查，但不： Starting to enter smth
应该已经显示消息，一切正常，但没有。仅在 + 输入一个额外符号后显示： Finishing typing email Added a space and it worked

输入如下：

                        <input
                        type='text'
                        placeholder='Email'
                        name='login'
                        required
                        onChange={this.handleChange}
                    />

处理程序（登录部分，密码相同）：

handleChange(event) {
    this.setState({
        field: event.target.name,
    });
    if (this.state.field === 'login') {
        this.setState({
            loginValue: event.target.value,
        });
        const result = this.checkLogin(this.state.loginValue);
        if (result == true) {
            this.setState({loginErrorMessage: "Email true", loginValid: true})
        } else {
            this.setState({loginErrorMessage: result.message.toString(), loginValid: false})
        }
    }
}

检查功能：

    checkLogin(value) {
    try {
        if (value.match(/^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/) == null) {
            throw new Error("Value must be email");
        }
        else {
            return true
        }
    } catch (myError) {
        return myError
    }
}

我是一般状态管理的新手，尤其是 React。我想我在错误的地方改变了状态。请帮忙。

【问题讨论】：

标签： javascript reactjs validation web state

【解决方案1】：

setState() 是异步的，这意味着如果您在设置状态后立即尝试使用该值，它还没有更新。尝试在setState()的回调中使用checkLogin()函数。

this.setState({
  loginValue: event.target.value,
}, () => {
  const result = this.checkLogin(this.state.loginValue);
  if (result == true) {
    this.setState({
      loginErrorMessage: "Email true",
      loginValid: true
    })
  } else {
    this.setState({
      loginErrorMessage: result.message.toString(),
      loginValid: false
    })
  }
});

【讨论】：

谢谢，它有助于在输入正确时正确显示 OK 消息。但它仍然不检查我输入的第一个字符。 .我将你关于承诺的建议与我是 L 的答案结合起来，这很有帮助。

【解决方案2】：

使用event.target.value 而不是this.state.loginValue，因为你将它保存在同一个函数上，react setState 的工作方式是 - 它在反映状态之前首先完成函数，所以如果你在同一函数之后有其他逻辑函数它仍然会使用旧的（当前）值。

只需将这些行替换为：

 if (event.target.name === 'login') {

和

 const result = this.checkLogin(event.target.value);

【讨论】：

谢谢，它有助于从第一个字符开始检查。但在输入结束时，它仍然没有显示出好的结果。但这使我转向了正确的方向，我将您的建议与 axtck 关于承诺的内容结合起来。所以它最终合作了。