在 React.js 中为滚动事件添加事件侦听器后未获得回调

Question

我按照这个 post 中的说明进行操作为滚动事件注册事件侦听器。

我有一个 React 组件，它呈现来自 React-Bootstrap 库的 Table 组件 https://react-bootstrap.github.io/

我想我正确地注册了事件侦听器，但我不确定为什么当我向下滚动 table 时，我的 handleScroll() 回调没有被调用。是不是因为实际的table本身没有注册事件监听器？

感谢您花时间阅读我的问题。感谢任何反馈。

下面是我如何注册事件侦听器的片段。

  handleScroll: function(event) {
    console.log('handleScroll invoked');
  },

  componentDidMount: function() {
    console.log('componentDidMount invoked');
    window.addEventListener('scroll', this.handleScroll);
  },

  componentWillUnmount: function() {
    console.log('componentWillUnmount invoked');
    window.removeEventListener('scroll', this.handleScroll);
  },

这是我的渲染函数的片段。

  render: function() {

    var tableRows = this.renderTableRow(this.props.sheet);

    return (
      <Table striped bordered condensed hover>
        <TableHeaderContainer
          tableTemplateName={this.props.tableTemplateName}
          sheetName={this.props.sheet.name}/>
        <tbody>
          {tableRows}
        </tbody>
      </Table>
    );
  }

Answer 1

您的代码看起来不错，所以滚动的可能不是 window 本身。 table 是否放在 div 或具有 overflow: auto 或 overflow:scroll 的东西中？如果是这样，则必须将侦听器附加到正在滚动的实际元素，例如

document.querySelector('.table-wrapper')
    .addEventListener('scroll', this.handleScroll);

如果是这种情况，那么只在代码中的包装器中添加一个 React onScroll 处理程序会更好

<div onScroll={this.handleScroll}><Table....

Answer 2

谢谢 dannyjolie - 这项工作

elementScrollData = (value) => {
  console.log('elementScrollData ', value);
} 
return (
      <div className="css-scroll-class" onScroll={elementScrollData}>
          Scroll element
      </div>
       );
}

Answer 3

对我来说，唯一有效的方法是将 true 添加到 EventListener 中的第三个参数：


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

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

来源：https://github.com/facebook/react/issues/5042#issuecomment-145317519

Answer 4

使用钩子时可以这样实现。请注意，当组件不再挂载时删除事件侦听器很重要。

useEffect 挂钩中的 return 语句将在组件卸载时执行。

const handleScroll = () => {
  console.log('Scrolling...');
};

useEffect(() => {
  window.addEventListener('scroll', handleScroll, true);

  // Remove the event listener
  return () => {
    window.removeEventListener('scroll', handleScroll, true);
  };
}, []);

在 React.js 中为滚动事件添加事件侦听器后未获得回调

Not getting callback after adding an event listener for scroll event in React.js

reactjs

react-bootstrap