Зачем нужно частичное применение в функциях-обработчиках событий?

Часто используется частичное применение в обработчиках событий, например

const handler = (id) => {
  const inner = (event) => { ... };
  return inner;
};

<button onClick={handler(id)}>Click</button>

Почему вообще нужна функция обертка handler(). Почему нельзя сразу выполнить все нужные действия обработчиком?

Ответы
Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
04 мая 2022

Это бывает нужно когда нам нужно передать какие-то дополнительные данные в обработчик. Представьте например таблицу и нужно написать обработчик клика по ячейкам в этой таблице. У каждой ячейки свои координаты, но при этом обработка для всех одинаковая, меняются только координаты. Если не делать частичное применение, то возникает вопрос: как передать координаты в обработчик?

const handler = (event) => {
  // какая-то логика
};

const result = cells.map((cell) => {
  // допустим у нас cell - это объект с координатами ячейки { column, row }
  <Cell onClick={handler} />
};

Конечно мы можем извратиться и передать нужные данные через атрибуты, и потом в евенте, через event.target получить доступ к этим данным.

const handler = (event) => {
  // какая-то логика
  const row = event.target.getAttribute('data-row');
};

const result = cells.map((cell) => {
  // допустим у нас cell - это объект с координатами ячейки { column, row }
  <Cell data-column={cell.column} data-row={cell.row} onClick={handler} />
};

Но это не всегда удобно, особенно если нужно передать что-то большее. Гораздо лучше тут использовать частичное применение:

const handler = (cell) => (event) => {
  // какая-то логика, теперь у нас есть объект cell с координатами
  const row = cell.getRow(); // это может быть даже объект с методами
};

const result = cells.map((cell) => {
  <Cell onClick={handler(cell)} />
};