Javascript 如何在react组件中添加滚动事件

我试图在表上添加一个

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>
    )
}

componentDidMount（）{
ReactDOM.findDOMNode（this.refs.table）.addEventListener（'scroll'，this.listenScrollEvent）；
}
组件将卸载（）{
ReactDOM.findDOMNode（this.refs.table）.removeEventListener（'scroll'，this.listenScrollEvent）；
}
listenScrollEvent（）{
log（'检测到滚动事件！'）；
}
render（）{
返回(
[...]
)
}

---

我尝试了

console.log（ReactDOM.findDOMNode（this.refs.table））

并得到了正确的结果，但从未触发scroll事件。我查看了一下，但还是失败了。非常感谢您的帮助。

您可以使用

onScroll

属性：

listenScrollEvent() {
    console.log('Scroll event detected!');
}

render() {
    return (
        <table onScroll={this.listenScrollEvent}>
           [...]
        </table>
    )
}

listenScrollEvent（）{
log（'检测到滚动事件！'）；
}
render（）{
返回(
[...]
)
}

---

下面是一个示例：

您需要将其绑定到上下文中的元素

render() {
    return (
        <table ref="table" onScroll={this.listenScrollEvent.bind(this)}>
           [...]
        </table>
    )
}

render（）{
返回(
[...]
)
}

尝试一下，添加了

。将（this）

绑定到

this.listenScrollEvent

当您将其传递给

addEventListener

时

   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>
        )
    }

componentDidMount（）{
ReactDOM.findDOMNode（this.refs.table）.addEventListener（'scroll'，this.listenScrollEvent.bind（this））；
}
组件将卸载（）{
ReactDOM.findDOMNode（this.refs.table）.removeEventListener（'scroll'，this.listenScrollEvent.bind（this））；
}
listenScrollEvent（）{
log（'检测到滚动事件！'）；
}
render（）{
返回(
[...]
)
}

我想做类似的事情。将事件侦听器添加到窗口而不是ReactDom.findDOMNode对我来说很有效

componentDidMount() {
    window.addEventListener('scroll', this.handleScrollToElement);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScrollToElement);
}

handleScrollToElement(event) {
    console.log('Fired ' + event)
}

---

我一直在寻找解决这个问题的好办法。下面的代码正在工作，其中侦听器就在特定的类/div上： React版本是16.0.0

第一次导入ReactDOM，

从“ReactDOM”导入ReactDOM

然后在
类xyz扩展组件
部分

  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（此.refs.category\u滚动）
：


...




如果是水平滚动，则在listenScrollEvent（）函数中，
event.currentTarget.scrollTop
起作用。
根据React documents（）

React事件使用camelCase命名，而不是小写。
您可以像使用纯HTML一样设置属性

HTML:

<div onclick="..." onscroll="...">
  ...
</div>

<div onClick={...} onScroll={...}>
  ...
</div>


...

JSX:

<div onclick="..." onscroll="...">
  ...
</div>

<div onClick={...} onScroll={...}>
  ...
</div>


...

您应该创建一个具有固定高度的包装块元素以启用滚动。
表格内容是否溢出表格边界？它不是，它不会滚动。容器有
溢出：auto
，这意味着表在一个框架内（如果我是正确的）。我不想使用
窗口。addEventListener
尝试将
display:block
添加到表中。对于实现与我相同但正在使用django的用户，请尝试使用。它已经有了
PaginatesCroll
。我想在react中没有启用在元素上放置
onScroll
事件？o_0; i尝试将其更改为
onClick
，但效果良好。。。现在回到
onScroll
的问题，如果您使用ES6类来创建组件。我已经在构造函数中做了，但仍然不起作用
constructor（props）{super（props）；this.listenScrollEvent=this.listenScrollEvent.bind（this）；}
虽然这通常很有用，但请注意原始问题中的
listenScrollEvent
方法对
this
没有任何作用，因此绑定它实际上是不必要的。出于某种原因，这实际上对我有所帮助。这很简单，我怀疑这是正确的答案，尽管询问者说他不想在评论中使用
window…
。然而，在评论中，他也没有回答第一个问题，即表格内容是否溢出。我怀疑答案真的是“不”，因为没有其他答案适合他。他没有告诉我们太多关于他的最终目标，所以我只能猜测他想要的是一个固定/绝对表，除了使用
窗口
，它永远不会滚动。起初我也遇到过类似的问题，直到我得到了滚动只在溢出的对象上触发的提示，所以我查找了它，是的，就是这样。一个窗口上可以有多个滚动组件，所以不是很好。