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

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

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

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

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

3 года назад

Ivan Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

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

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)} />
};

3 года назад

Ivan Gagarinov

2 месяца

React

Навык разрабатывать быстрые и удобные интерфейсы, открывающий доступ к интересным вакансиям в крупных компаниях

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

1 месяц

Асинхронное программирование на JS

Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования.

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

Похожие вопросы