时间戳

首页 > 解决方案 > 键入时的 TextInput 验证

javascript - 键入时的 TextInput 验证

问题描述

我有一个特定格式的电子邮件地址的 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: ""});
    };
};

标签： javascriptandroidreact-native

解决方案

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)) {
    ...
  }
});

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

推荐阅读