Скрытие ошибок, пока пользователь не покинет ввод

Question

Я на самом деле создаю свою форму с входными данными! Я создал state внизу каждого TextInput, чтобы судить, является ли пользовательский ввод верным или неверным !! Однако, когда я запускаю свое приложение, оно дает мне по умолчанию все ложные значения, тогда это имеет смысл, потому что все входные данные пустые! Я хочу, чтобы эти ошибки были скрыты по умолчанию и отображались до тех пор, пока пользователь не покинет каждый ввод !! Это пример одного входа

регистрация. js

this.state{
   mail:""
}

...

<TextInput
  onChangeText ={(value)=> this.setState({mail : value})} 
  style={{
    width:200,
    height:40
  }}
  placeholder='xyz@email.com'
/>

...

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>
    }

Answer 1

Попробуйте это

<TextInput onChangeText={(value) => this.state.mail = value}
    onBlur={() => this.forceUpdate()}
    onFocus={() => {
       this.state.mailTouched = true;
    }}
    style={{
        width: 200,
        height: 40
    }} placeholder='xyz@email.com' />