ReactJS -当鼠标进入div元素(onMouseEnter)时如何添加removeEventListener
ReactJS -当鼠标进入div元素(onMouseEnter)时如何添加removeEventListener
提问于 2020-03-16 04:16:29
问题：如何使onMouseEnter和onMouseLeave禁用，然后重新启用onScroll函数？
我有一个onScroll事件侦听器，它侦听当前页面的位置。我的问题是，我有一个可以滚动的子div元素。
鉴于我的onScroll事件被绑定到父div元素，当我打开子元素并滚动它时，我会得到一个未定义的setState错误。
当我在子div元素上悬停时，我想尝试禁用onScroll事件侦听器。
我的代码(解释我的问题非常简单)：
componentDidMount() {
window.onscroll = () => this.listenToScroll()
}
listenToScroll() {
// Does stuff with the value
}
render () {
return (
// This is the parent div element, which has a lot more text to cause the scroll effect
<div onScroll={this.listenToScroll} >
// This child element when clicked and expanded upon has an inner scroll element
// When I scroll through the child element, I get a setState undefined error.
<div>
<ScrollExample
// This is what I want to happen, where when I enter this div element, the scroll event is disabled
// When I exit it, it is re-enabled
onMouseEnter={window.removeEventListener(this.listenToScroll, false)}
onMouseLeave={window.removeEventListener(this.listenToScroll, true)}
/>
</div>
</div>
)回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-16 04:38:32
试试这个：
componentDidMount() {
window.addEventListener('scroll', this.listenToScroll)
}
listenToScroll() {
// Does stuff with the value
}
render () {
return (
// This is the parent div element, which has a lot more text to cause the scroll effect
<div onScroll={this.listenToScroll} >
// This child element when clicked and expanded upon has an inner scroll element
// When I scroll through the child element, I get a setState undefined error.
<div>
<ScrollExample
// This is what I want to happen, where when I enter this div element, the scroll event is disabled
// When I exit it, it is re-enabled
onMouseEnter={() => window.removeEventListener('scroll', this.listenToScroll)}
onMouseLeave={() => window.addEventListener('scroll', this.listenToScroll)}
/>
</div>
</div>
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60700261
复制相关文章
相似问题
腾讯云开发者
