使用高阶组件为每个组件添加事件侦听器
使用高阶组件为每个组件添加事件侦听器
提问于 2018-07-04 04:57:42
我在我的应用程序中有一些组件，希望它们可以处理一些用户从键盘输入的内容。为此，我创建了以下函数：
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中的
hi
组件2中的hi
另一方面，一旦其中一个组件被卸载，我将不再收到任何事件。
我做错了什么？我如何通过一个可以在我的应用程序中重用的HoC获得一个keydown事件处理程序？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51162720
复制相关文章
相似问题
腾讯云开发者
