#javascript #reactjs #event-handling #icallbackeventhandler
#javascript #reactjs #обработка событий #icallbackeventhandler
Вопрос:
Я заранее ценю все ваши идеи. Моя проблема здесь в том, что поле ввода электронного письма не обновляется. Кто-нибудь может дать мне решение?
<input
type="text"
placeholder="Enter Email "
onChange={this.emailHandle}
value={this.state.email}
/>
Обработчик событий для указанного выше поля ввода находится здесь:
emailHandle = (e) => {
if (e.target.value !== "undefined") {
var pattern = new RegExp(/^(("[w-s] ")|([w-] (?:.[w-] )*)|("[w-s] ")([w-] (?:.[w-] )*))(@((?:[w-] .)*w[w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$)|(@[?((25[0-5].|2[0-4][0-9].|1[0-9]{2}.|[0-9]{1,2}.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2}).){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})]?$)/i);
if (pattern.test(e.target.value)) {
console.log(e.target.value);
this.setState({ email: e.target.value })
}
}
}
Комментарии:
1. Вы действительно видите журналы консоли или их нет?
2. Вы удалили блок условий и проверили, работает ли only
setState?3. Спасибо, Хирасава Юи и разработка-предложение ninja @Matthew Brooks сработало
Ответ №1:
onChange Событие никогда не будет проверяться регулярным выражением, потому что оно вызывается для каждого введенного ключа. Итак, вы начинаете печатать andy@gmail.com , a но a не передаете регулярное выражение … поэтому состояние не обновляется… так что это похоже на то, что вы не вводили a .
Ответ №2:
Каково начальное значение состояния вашего компонента? Во-первых, если вы не инициализируете свойство email в state как пустую строку, и оно не определено, вы блокируете обновление этого состояния с помощью проверки undefined . Но у вас есть проблема посерьезнее. Вы проверяете, соответствует ли значение ввода вашему шаблону регулярных выражений электронной почты. Это никогда не сработает, если вы используете эту проверку для блокировки состояния настройки. onChange будет срабатывать каждый раз, когда изменяется входное значение, и это означает, что он будет изменять по одному символу за раз. Итак, что происходит, пользователь вводит символ, onChange срабатывает, но он не соответствует вашему шаблону, и вы не обновляете состояние.
То, что вы хотите сделать, это всегда обновлять состояние, а затем обрабатывать это как проверку, чтобы заблокировать отправку формы. Или вы можете показать какую-то ошибку, но вам нужно всегда вызывать setState с включенным новым значением e.target.value .