javascript - 隐藏错误直到用户离开输入

Question

我实际上是在用输入创建我的表单！我在state每个的底部创建了一个TextInput来判断用户输入的真假！！但是，当我运行我的应用程序时，默认情况下它给我的一切都是假的，这是有道理的，因为输入都是空白的！我希望这些错误默认隐藏并显示，直到用户离开每一个输入！这是一个输入的示例

注册.js

this.state{
   mail:""
}

...

<TextInput
  onChangeText ={(value)=> this.setState({mail : value})} 
  style={{
    width:200,
    height:40
  }}
  placeholder='[e-mail]'
/>

...

render () {
  const regexMail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

  const mail = this.state

  return (
    ...

    { regexMail.test(mail) != true 
      ? <Text>Mail invalide</Text>
      : <Text>Mail valide</Text>
    }

标签： javascriptreact-nativevisual-studio-code

Answer 1

尝试这个

<TextInput onChangeText={(value) => this.state.mail = value}
    onBlur={() => this.forceUpdate()}
    onFocus={() => {
       this.state.mailTouched = true;
    }}
    style={{
        width: 200,
        height: 40
    }} placeholder='[e-mail]' />