Question

我按照这篇文章的说明进行操作 Update style of a component onScroll in React.js为滚动事件注册事件监听器。

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

我认为我正确地注册了事件监听器，但我不确定为什么当我向下滚动表时，我的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>
    );
  }

Answer 1

你的代码看起来不错，所以它可能不是滚动的窗口本身。表格放在div内还是overflow: auto或overflow:scroll？如果是这样，则必须将侦听器附加到滚动的实际元素，例如

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

如果是这种情况，那么只需将React onScroll处理程序添加到代码中的包装器就更好了

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

Answer 2

对我来说唯一有效的是将 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 3

谢谢dannyjolie-这项工作

workshop_id

在React.js中为scroll事件添加事件侦听器后没有得到回调

3 个答案: