如何在 React 组件上添加滚动事件而不是在窗口对象上添加？

Question

我使用 ReactJS 创建了一份简历，该简历的正文有 100vw 和 100vh 尺寸，即在窗口/正文级别没有滚动，但在简历里面有一个包含滚动的组件。最后我想创建一个粘性标题。但在创建粘性标头之前，此代码应首先运行。我试过这个：

componentDidMount() {
 ReactDOM.findDOMNode(this.refs.stickyHeader).addEventListener('scroll', this.isScrollOccured.bind(this));
}

componentWillUnmount() {
 ReactDOM.findDOMNode(this.refs.stickyHeader).removeEventListener('scroll', this.isScrollOccured.bind(this));
}

isScrollOccured() {
    console.log('Scrolling Occured');
}

render() {
    return (
        <div className="Container">
                        <div className="Header" ref="stickyHeader">
                        [...]
                        </div>
                </div>
                )
}

这没有给出任何响应，但是如果我在 addEventListener 中用 wheel 事件更改 scroll 事件，它可以正常工作，但我不想使用 轮子。我检查了Other's Solution，但它对我不起作用。帮我找出解决办法。如有必要，我将上传我的作品的 Image.png。

Answer 1

refs API 已更改。试试这个

  stickyHeader = React.createRef()
  componentDidMount() {
    this.stickyHeader.current.addEventListener(
      "scroll",
      this.isScrollOccured.bind(this)
    );
  }

  componentWillUnmount() {
    this.stickyHeader.current.removeEventListener(
      "scroll",
      this.isScrollOccured.bind(this)
    );
  }

  isScrollOccured() {
    console.log("Scrolling Occured");
  }

  render() {
    return (
      <div className="Container">
        <div className="Header" ref={this.stickyHeader}>
          [...]
        </div>
      </div>
    );
  }

您可以了解更多关于 refs here。