У меня есть некоторые компоненты в моем приложении, которые, как ожидается, будут обрабатывать некоторые пользовательские вводы с клавиатуры. Для этого я создал следующую функцию:
export default function withKeydownEventHandler (handler) {
id = id + 1
return lifecycle({
componentWillMount () {
$(window).on(`keydown.${id}`, evt => handler(evt))
},
componentWillUnmount () {
$(window).off(`keydown.${id}`)
}
})
}
Это работает нормально, но обработчики запускаются для разных компонентов одновременно. Поэтому, если мой обработчик делает разные вещи в каждом компоненте, всякий раз, когда я нажимаю кнопку, он будет запускаться из обоих компонентов одновременно. Кроме того, после размонтирования одного компонента HoC больше не будет работать.
Например, скажем, у меня есть следующие два контейнера:
export default compose(
withKeydownEventHandler((evt, props) => {
console.warn('hi from Component 1')
}),
withProps(() => {
// stuff
})
)(Component1)
export default compose(
withKeydownEventHandler((evt, props) => {
console.warn('hi from Component 2')
}),
withProps(() => {
// stuff
})
)(Component2)
Если я нажму любую кнопку в приложении, я получу следующий вывод:
привет от компонента 1
привет от Компонента 2
С другой стороны, как только один из компонентов размонтируется, я больше не получаю никаких событий.
Что я делаю не так? Как я могу получить обработчик события нажатия клавиши через HoC, который можно повторно использовать в моем приложении?