React事件处理程序未被删除
React event handler not removed
我在我的React组件中有一个单击事件处理程序,并希望在hideLeft
发生时删除事件处理程序,但无法使用$(document).unbind('click', this.hideLeft.bind(this))
这样做。目前只能通过执行$(document).unbind('click')
来删除点击事件处理程序。
我怎样才能避免这种情况,只删除与hideLeft
函数相关的单击事件处理程序?
class Header extends Component {
constructor(props, context) {
super(props, context);
this.state = {
panel_visible: false
};
}
logOut() {
console.log('logged out');
}
hideLeft(event) {
if (!$(event.target).closest('.menu').length) {
$(document).unbind('click');
this.setState({
panel_visible: false
});
}
}
showLeft() {
this.setState({
panel_visible: true
});
$(document).bind('click', this.hideLeft.bind(this));
}
render() {
return (
<Sticky>
<header className='app-header'>
<LeftPanel visibility={this.state.panel_visible} showLeft={e => this.showLeft()}
hideLeft={e => this.hideLeft()} />
<button onClick={e => this.showLeft()}>Show Left Menu!</button>
<button className='btn btn-default logout' onClick={e => this.logOut()}>Log Out</button>
<h1>Some header </h1>
</header>
</Sticky>
);
}
}
我正在使用香草js方法addEventListener
和removeEventListener
。
document.addEventListener('click', this.hideLeft.bind(this));
删除:
document.removeEventListener('click', this.hideLeft.bind(this));
相关文章:
- 如何在iOS应用程序中从Firebase中删除超过6小时的数据
- 使用jquery删除输入框上的外部处理程序/库
- 如何从浏览器中获取cookie,从另一个应用程序中删除
- jQuery使用.of()删除事件处理程序时出现的问题
- 困在使用RxJS删除所有计数器应用程序中
- JS:删除带有接受参数的处理程序的事件侦听器
- Chrome扩展程序 - 页面更新两次,然后在YouTube上删除
- 使用cordova插件删除iOS中应用程序的临时目录
- 如何删除DOM事件处理程序的重复JavaScript代码
- 应用程序脚本-自动从谷歌驱动器删除超过3天的文件-获取文件列表
- node.js-express.js API删除http后处理程序
- AngularJS:如何从指令添加的元素中删除事件处理程序
- Twitter引导程序:删除/切换类似复选框的按钮组的活动状态
- 用程序从单个HTML元素中删除CSS样式规则
- 如何使用d3.js选择器删除处理程序
- 从引导程序3删除模式向laravel控制器传递行id
- 从Express,Node.js应用程序中删除MongoDB文档
- Ajax 仅在 Ruby 应用程序中刷新时删除
- 删除节点的内联事件处理程序/属性
- 引导程序 3 删除模式触发器