@Richswitch
junior

Как обойти особенность работы состояний в React для валидации инпута?

Привет!
В офф. доках React можно найти пример работы onChange с инпутами -> codepan
Можно заметить что onChange не возвращает текущий введенный символ в событие.

В моем примере это мне мешает потому что я валидирую почту пользователя регулярным выражением.
т.е. когда я ввел инпут mail@gmail.com мне нужно еще раз вызвать событие onChange чтобы сработала валидация.
handleChange(e) {
    this.validate(e.target.value);
  }
  • Вопрос задан
  • 137 просмотров
Решения вопроса 1
@SeaBreeze876
Front-end разработчик
Можно заметить что onChange не возвращает текущий введенный символ в событие.

в событии есть последний введенный символ, его нет в стейте сразу после вызова setState
handleChange(event) {
    this.setState({value: event.target.value});
    console.log(this.state.value);
  }

метод setState асинхронный, и принимает вторым параметром колбэк
если делать вот так, то все будет норм
handleChange(event) {
    this.setState({value: event.target.value}, () => console.log(this.state.value));
  }

не вижу никаких проблем с валидацией
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы