Зачем нужно частичное применение в функциях-обработчиках событий?
Часто используется частичное применение в обработчиках событий, например
const handler = (id) => {
const inner = (event) => { ... };
return inner;
};
<button onClick={handler(id)}>Click</button>
Почему вообще нужна функция обертка handler(). Почему нельзя сразу выполнить все нужные действия обработчиком?
Это бывает нужно когда нам нужно передать какие-то дополнительные данные в обработчик. Представьте например таблицу и нужно написать обработчик клика по ячейкам в этой таблице. У каждой ячейки свои координаты, но при этом обработка для всех одинаковая, меняются только координаты. Если не делать частичное применение, то возникает вопрос: как передать координаты в обработчик?
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)} />
};
