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

Question

[Moro Zota]

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

Этот метод стоит на событие onChange. Объясните пожалуйста, чтобы я понял. Почему в setState свойство type обёрнуто в квадратные скобки?

Answer 1

[0xD34F]

Вычисляемые имена свойств.

Этот метод стоит на событие 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">

Answer 2

[Максим]

Поддержу 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 начинаем разбираться с [ вычисляемым свойством ]

Comments

[Moro Zota]

Есть state user. Вызов этого метода(handleChange), выглядит так:
onChange={this.handleChange('user')}
объясните пожалуйста, что значит ('user')? как я понимаю это state. Но почему он так передаётся
Или я вообще ничего не понимаю

[Moro Zota]

Всё, понял
Спасибо

[Максим]

Moro Zota, супер! Если что добавил в ответ ссылку на прошедший вебинар, там можете посмотреть, закрепить.