Как объединить обработчики событий, представленные как значения ключей в объектах

Question

Есть компонент react Component который содержит объект ownedEventHandlersс обработчиком события. При вызове компонента Component в него передается еще один объект handlers с обработчиками. Моя задача состоит в том, что бы объединить функционал колбеков, находящихся в объектах ownedEventHandlers и handlers. Например в функции mergeHandlers

const handlers = {
onClick: (e) => do something else,
}

const Component = ({handlers}) => {

  const ownedEventHandlers = {
    onClick: (e) => do something,
  }

  const mergeHandlers = (ownedEventHandlers, handlers) => {
   функция должна объединить функционал колбеков.

     return {
       onClick: (e) => {
         выполнить функционал из колбека из объекта `handlers`
         выполнить функционал из колбека из объекта 
                                            `ownedEventHandlers`
       }
     }
  }
  return(
    <button {...mergeHandlers(ownedEventHandlers, handlers)}) />
      
}

Функция mergeHandlers должна выглядеть примерно так:

const mergeHandlers = (ownedEventHandlers, addedEventHandlers) => {
    const _ownedEventHandlers = { ...ownedEventHandlers };
    
    if (!addedEventHandlers || Object.keys(addedEventHandlers).length === 0) {
      return _ownedEventHandlers;
    }
    const keyAddedEventHandlers = Object.keys(addedEventHandlers);
    for (const handl in ownedEventHandlers) {
      if (ownedEventHandlers.hasOwnProperty(handl)) {
        for (let i = 0; i < keyAddedEventHandlers.length; i++) {
          if (handl === keyAddedEventHandlers[i]) {
// В этом месте нужно объединить функционалы двух обработчиков onClick
            console.log('нужно объединение');
          } else {
            _ownedEventHandlers[keyAddedEventHandlers[i]] = addedEventHandlers[keyAddedEventHandlers[i]];
          }
        }
      }
    }
    console.log('_ownedEventHandlers', _ownedEventHandlers);
    return _ownedEventHandlers;
  };

Есть вариант в исходном объекте с обработчиками ownedEventHandlers значением ключа делать функцию которая будет вызывать другие функции это го же события например так:

const ownedEventHandlers = {
    onClick: (e) => {
     (() => do something)()
    }
  }

и добавлять обработчики в неё, но не представляю как это сделать. Прошу поделиться идеями по этому поводу. Заранее благодарю.

Answer 1

На сообщество надейся а сам не бездельничай!!! Вот и я решил свой вопрос. Функция которая объединяет функционал обработчиков выглядит так:

const concatenatesEventHandlers = (ownedEventHandlers, addedEventHandlers) => {
    const _ownedEventHandlers = { ...ownedEventHandlers };
    if (!addedEventHandlers || Object.keys(addedEventHandlers).length === 0) {
      return _ownedEventHandlers;
    }
    const keyAddedEventHandlers = Object.keys(addedEventHandlers);
    for (const handl in ownedEventHandlers) {
      if (ownedEventHandlers.hasOwnProperty(handl)) {
        for (let i = 0; i < keyAddedEventHandlers.length; i++) {
          if (handl === keyAddedEventHandlers[i]) {
**Ниже в трёх строчках я создаю функцию которая по очереди вызывает обработчики**
            const concatFunc = (e) => {
              ownedEventHandlers[handl]();
              addedEventHandlers[keyAddedEventHandlers[i]](e);
            };
**Присваиваю функцию `concatFunc` обработчику в смёрженом объекте**
            _ownedEventHandlers[keyAddedEventHandlers[i]] = concatFunc;
          } else {
            _ownedEventHandlers[keyAddedEventHandlers[i]] = addedEventHandlers[keyAddedEventHandlers[i]];
          }
        }
      }
    }
    return _ownedEventHandlers;
  };

Возможно мой опыт будет кому то полезным.

Если у более опытных товарищей будут замечания по моему коду прошу высказаться. Для меня это важно.

БЛОГ НА HUSL

Как объединить обработчики событий, представленные как значения ключей в объектах

Ответы (1 шт):