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

Question

[Unknown]

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

В моем примере это мне мешает потому что я валидирую почту пользователя регулярным выражением.
т.е. когда я ввел инпут [e-mail] мне нужно еще раз вызвать событие onChange чтобы сработала валидация.

handleChange(e) {
    this.validate(e.target.value);
  }

Answer 1

[Анатолий Жаров]

Можно заметить что 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));
  }

не вижу никаких проблем с валидацией

Comments

[Unknown]

Spasibo, sir!