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

IT技术 reactjs react-bootstrap
2021-05-25 21:48:08

我按照这篇文章中的说明 更新 React.js 中的 onScroll 组件样式来注册滚动事件的事件侦听器。

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

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

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

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

  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>
    );
  }
3个回答

您的代码看起来不错，因此滚动的可能不是窗口本身。是表放在里面div或东西，有overflow: auto或overflow:scroll？如果是这样，则侦听器必须附加到正在滚动的实际元素，例如

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

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

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

对我来说，唯一有效的方法是添加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

谢谢 dannyjolie - 这项工作 

elementScrollData = (value) => {
  console.log('elementScrollData ', value);
} 
return (
      <div className="css-scroll-class" onScroll={elementScrollData}>
          Scroll element
      </div>
       );
}
其它你可能感兴趣的问题
上一篇将react文本字段输入值作为参数传递给方法 下一篇当部分应该有小的分离时，我的第一层变成固体