Блог

Приложение React. Форма авторизации. При вводе пользователем я проверяю, правильно ли пользователь пишет(электронная почта для электронной почты и латинские символы цифры для пароля)

Проблема в том, что он показывает результат в браузере не в момент ввода, а на один символ позже. Примеры:

1. Следует проверять с первого символа, но не делает этого: Начинаю вводить что-то
2. Уже должно появиться сообщение о том, что все в порядке, но этого не происходит. Отображается только после одного введенного дополнительного символа: Завершение ввода электронной почты
   Добавило пробел, и это сработало

Входные данные следующие:

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

Я новичок в управлении государством в целом и в реагировании в частности. Я думаю, что меняю состояние где-то не в том месте. Пожалуйста, помогите.

Используйте event.target.value вместо this.state.loginValue того, как вы сохраняете его в той же функции, способ работы react setState таков: он сначала завершает функцию, прежде чем она отразит состояние, поэтому, если у вас будет дополнительная логика после этого в той же функции, она все равно будет использовать старое (текущее) значение.

Просто замените эти строки на:

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

и

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

setState() является асинхронным, что означает, что если вы попытаетесь использовать значение сразу после установки состояния, оно еще не будет обновлено. Попробуйте использовать checkLogin() функцию в обратном setState() вызове .

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