#javascript #reactjs #validation #web #state
Вопрос:
Приложение React. Форма авторизации. При вводе пользователем я проверяю, правильно ли пользователь пишет(электронная почта для электронной почты и латинские символы цифры для пароля)
Проблема в том, что он показывает результат в браузере не в момент ввода, а на один символ позже. Примеры:
- Следует проверять с первого символа, но не делает этого: Начинаю вводить что-то
- Уже должно появиться сообщение о том, что все в порядке, но этого не происходит. Отображается только после одного введенного дополнительного символа: Завершение ввода электронной почты
Добавило пробел, и это сработало
Входные данные следующие:
<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
}
}
Я новичок в управлении государством в целом и в реагировании в частности. Я думаю, что меняю состояние где-то не в том месте. Пожалуйста, помогите.
Ответ №1:
Используйте event.target.value
вместо this.state.loginValue
того, как вы сохраняете его в той же функции, способ работы react setState таков: он сначала завершает функцию, прежде чем она отразит состояние, поэтому, если у вас будет дополнительная логика после этого в той же функции, она все равно будет использовать старое (текущее) значение.
Просто замените эти строки на:
if (event.target.name === 'login') {
и
const result = this.checkLogin(event.target.value);
Комментарии:
1. Спасибо, это помогло начать проверку с первого персонажа. Но в конце ввода он все равно не показывает хорошего результата. Но это повернуло меня в правильном направлении, и я объединил ваше предложение с предложением axtck об обещаниях. Так что в конце концов все сработало вместе.
Ответ №2:
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
})
}
});
Комментарии:
1. Спасибо, это помогло показать сообщение » ОК » сразу, когда ввод становится правильным.. Но он все равно не проверяет первый введенный мной символ. . Я объединил ваше предложение об обещаниях с ответом «Я есть Я», и это помогло.