[英]How to add scroll event in react component
我正在尝试在表上添加onScroll
事件。 这是我尝试过的:
componentDidMount() {
ReactDOM.findDOMNode(this.refs.table).addEventListener('scroll', this.listenScrollEvent);
}
componentWillUnmount() {
ReactDOM.findDOMNode(this.refs.table).removeEventListener('scroll', this.listenScrollEvent);
}
listenScrollEvent() {
console.log('Scroll event detected!');
}
render() {
return (
<table ref="table">
[...]
</table>
)
}
我尝试了console.log(ReactDOM.findDOMNode(this.refs.table))
并且我得到了正确的结果,但根本不会触发滚动事件。 我在这里查看,但仍然失败。 任何帮助将不胜感激。
您需要将 this 绑定到上下文中的元素。
render() {
return (
<table ref="table" onScroll={this.listenScrollEvent.bind(this)}>
[...]
</table>
)
}
您可以使用onScroll
属性:
listenScrollEvent() {
console.log('Scroll event detected!');
}
render() {
return (
<table onScroll={this.listenScrollEvent}>
[...]
</table>
)
}
这是一个例子: https : //jsfiddle.net/81Lujabv/
我正在寻找做类似的事情。 将事件侦听器添加到窗口而不是 ReactDom.findDOMNode 对我有用...
componentDidMount() {
window.addEventListener('scroll', this.handleScrollToElement);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScrollToElement);
}
handleScrollToElement(event) {
console.log('Fired ' + event)
}
我一直在寻找解决这个问题的好方法。 以下代码正在运行,其中侦听器仅位于特定的 class/div 上: React 版本为 16.0.0
首先导入ReactDOM, import ReactDOM from "react-dom";
然后在class xyz extends Component
部分
constructor(props) {
super();
this.state = {
vPos : 0
}
this.listenScrollEvent = this.listenScrollEvent.bind(this);
}
componentDidMount() {
ReactDOM.findDOMNode(this.refs.category_scroll).addEventListener('scroll', this.listenScrollEvent);
}
componentWillUnmount() {
ReactDOM.findDOMNode(this.refs.category_scroll).removeEventListener('scroll', this.listenScrollEvent);
}
listenScrollEvent(event) {
console.log('firee');
this.setState({
vPos: event.target.body.scrollTop
});
}
粘贴上述函数后,在render()
方法中,无论您想命名ref
方法,都可以这样做,请确保findDOMNode
中也使用相同的名称,即findDOMNode(this.refs.category_scroll)
:
<div onScroll={this.listenScrollEvent} ref="category_scroll">
...
</div>
.
.
如果是水平滚动,则event.currentTarget.scrollTop
在 listenScrollEvent() 函数中起作用。
根据 React 文档( https://reactjs.org/docs/handling-events.html ),
React 事件使用驼峰命名,而不是小写。 您可以像使用纯 HTML 一样设置属性。
HTML:
<div onclick="..." onscroll="...">
...
</div>
JSX:
<div onClick={...} onScroll={...}>
...
</div>
您应该创建一个具有固定高度的包装块元素以启用滚动。
试试.bind(this)
,当你将它传递给addEventListener
时,将.bind(this)
添加到this.listenScrollEvent
。
componentDidMount() {
ReactDOM.findDOMNode(this.refs.table).addEventListener('scroll', this.listenScrollEvent.bind(this));
}
componentWillUnmount() {
ReactDOM.findDOMNode(this.refs.table).removeEventListener('scroll', this.listenScrollEvent.bind(this));
}
listenScrollEvent() {
console.log('Scroll event detected!');
}
render() {
return (
<table ref="table">
[...]
</table>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.