Обработчик React — каррирование

Подумайте о приведенном ниже коде

handleChangeEvent = name => (event) => {
    this.setState({
      [name]: event.target.value,
 });

так как

constructor() {
   super();
   this.handleChangeEvent = this.handleChangeEvent.bind(this);
}

 handleChangeEvent(name){
   return (event) => {
      this.setState({
        [name]: event.target.value,
       });
   }
}

поэтому в основном вызов handleChangeEvent как this.handleChangeEvent('name') вернет функцию в событие onChange. OnChange при срабатывании вызовет этот метод с аргументом event. Теперь, когда возвращаемая функция образует замыкание с внешней функцией handleChangeEvent, она может использовать переменную name из объемлющей области, как будет работать приведенный выше код с каррированием.

this.handleChangeEvent('name') запускается при инициализации, возвращает функцию и присваивается onChange функции.

(event) => {
  this.setState({
    [name]: event.target.value
  })
}

Теперь то же самое с

<TextField
    ...
    value = {name}
    onChange = {this.handleEvent}
/>
//[name] now become yourName. It's `closure`
handleEvent = (event) => this.setState({yourName: event.target.value})

И event теперь представляет собой TextField, когда вы запускаете функцию.

Функция, вызываемая обработчиком событий, получает в качестве аргумента объект Event. Представьте, что метод addEventListener, реализованный браузерами, выглядит так:

something.addEventListener = (eventName, callback, useCapture) => {
  // Some code here
  // Bla bla bla
  const eventObj = {
    // Event object
  };
 callback(eventObj);
}

something.addEventListener('click', eventObject => {
  // Do something
}, false);

Итак, как вы можете видеть, если используется обычная функция, переменная name будет содержать объект Event вместо фактического имени. Поэтому, используя функцию карри, функция ВОЗВРАЩЕНО этим будет иметь переданный объект Event, готовый к использованию.

В ответ событие в этом случае представляет собой синтетический экземпляр события, передаваемый событиям обработчика. Подробнее об этом здесь. Это позволяет вам получить доступ к значению свойства event.target. В этом примере это событие обработчика просто устанавливает состояние любого значения имени со значением, введенным в текстовое поле. Надеюсь, это прояснит ситуацию!