javascript - 键入时进行 TextInput 验证

Question

我有一个用于特定格式的电子邮件地址的 TextInput，并有一个正则表达式来验证它。我想在用户键入时验证它，并使用 TextInput 框中的确切值，但我没有得到这一点。

我所做的实际上是将验证添加到 TextInput 对象的 OnChangeText 方法中。该机制似乎有效，但它正在根据当前内容后面 1 个字母的内容进行验证。

例如:如果我输入“June”，它将仅验证“Jun”。如果我删除“e”，那么它将得到“June”，随后。

这是正确的吗？或者我可以在其他地方调用我的验证来达到预期的效果吗？

<TextInput
    placeholder='Type in your email'
    style={Styles.Input}
    onChangeText={(text) => {this.setLogin(text)}}
    value={ this.state.login }
    autoCompleteType={"email"}
    autoFocus={true}
/>
...
...
...
setLogin = (input) => {
    this.setState({login: input});
    console.log(this.state.login_regex.test(this.state.login));
    if (!this.state.login_regex.test(this.state.login)) {
        this.setState({login_msg: "Use an internal mail address"});
    } else {
        this.setState({login_msg: ""});
    };
};   

Answer 1

setState 是一个异步函数，这就是为什么 this.state.login 在测试时可能仍保留旧值。

您可以使用输入而不是状态值，如下所示

if (!this.state.login_regex.test(input)) {
  ...
}

或者您可以将回调函数作为第二个参数传递给 this.setState，如下所示

this.setState({login: input}, () => {
  if (!this.state.login_regex.test(this.state.login)) {
    ...
  }
});

但我通常推荐第一种方法。