#javascript #reactjs #jsx #es6-modules #destructuring
#javascript #reactjs #jsx #es6-модули #деструктурирование
Вопрос:
Я получил здесь функцию обработчика событий, которая используется для обработки onChange событий полей ввода.
Я не понимаю, как [e.target.name] работает / что именно делает.
(Я знаю, что он получает name значение атрибута целевого поля ввода).
const handleOnChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });
Может кто-нибудь, пожалуйста, объяснить, что это делает и как это работает? Очень ценится.
Комментарии:
1. это называется
property accessors, взгляните на это: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…2. если вы используете react 16, лучше сохранить событие в переменной, потому что react будет обновлять состояние асинхронно, поэтому событие может исчезнуть, когда react захочет получить к нему доступ. это не относится к предстоящему react 17.
3. @adel Обновление состояния выполняется асинхронно, но переданный аргумент состояния вычисляется синхронно, если вы не используете вариант обратного вызова и не передаете функцию для вычисления нового состояния.
4. @3limin4t0r да, вы правы, мое плохое использование обратного вызова с setstate приведет к сбою приложения.
Ответ №1:
[e.target.name] Это то, что в JS называется вычисляемым свойством.
Проще говоря, [e.target.name] станет свойством объекта (ключом) со значением e.target.name . Например, если e.target.name соответствует (имеет значение) credit , структура объекта будет выглядеть следующим образом:
setFormData({
..formData,
credit: e.target.value
});
Это просто JavaScript, а точнее, функция языка ES6.
Еще одна важная вещь, которую следует помнить о onChange обработчике событий React, заключается в том, что он ведет себя совершенно иначе, чем собственное событие JS onchange . Прочитайте этот пост для получения дополнительной информации.
Ссылки