morozota
@morozota

Почему в setState имя свойства обёрнуто в квадратные скобки?

handleChange = type => ev =>{
        const {value} = ev.target
        if (value.length > limits.user.max) return
        this.setState({
            [type]: value
        })
    }

Этот метод стоит на событие onChange. Объясните пожалуйста, чтобы я понял. Почему в setState свойство type обёрнуто в квадратные скобки?
  • Вопрос задан
  • 162 просмотра
Решения вопроса 2
0xD34F
@0xD34F Куратор тега React
Вычисляемые имена свойств.

Этот метод стоит на событие onChange.

Сомнительное утверждение. "На событие" "стоит" не handleChange, а функция, которую он возвращает. По-видимому, необходимо единообразно обрабатывать события, возникающие в разных местах - единственные отличия, это имена обновляемых свойств, для каждого из которых создаётся собственный обработчик. Что, кстати, делать вовсе не обязательно - есть вариант прицепить значение type к элементу в виде data-атрибута, и тогда можно будет использовать общий обработчик:

handleChange = ({ target: { value, dataset: { type } } }) => {
  if (value.length <= limits.user.max) {
    this.setState({
      [type]: value,
    });
  }
}

<input onChange={this.handleChange} data-type="xxx">
<input onChange={this.handleChange} data-type="yyy">
<input onChange={this.handleChange} data-type="zzz">
Ответ написан
Комментировать
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Поддержу 0xD34F , слегка дополню своими словами:

У разработчика, наверняка, было много однотипных функций. Чтобы не городить копипасту, он передает свойство type в обработчик, а потом его сразу же "считывает" в момент setState.

Получается, что если в type (это переменная) пришло, например "name" (а это строка) - то в setState будет изменяться name свойство стейта.

В js для удобства, можно свойство считать через точку:

const myObj = {
   name: 'Max',
   city: 'MSK',
}
myObj.name // Max
myObj['name'] // Max

const type = 'name'

myObj[type] // -> myObj.name  -> Max (в переменной type была строка "name")
myObj.type // -> myObj.type -> undefined (так как свойства type у нас нет)


здесь в видео на 43:35 начинаем разбираться с [ вычисляемым свойством ]
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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