Question

我只是在用户向下滚过标题时尝试制作页脚横幅广告，并在用户向上滚动到顶部时隐藏它。我对如何实现这个的想法是在页面的顶部组件中为scroll事件添加一个事件监听器。这是我目前的代码。但它不起作用：

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

handleScroll(e) {
  if(window.pageYOffset > 50 && window.pageYOffset < 900) {
    console.log('scrolled');
    this.setState({
      showBanner: true,
    });
  } else {
    this.setState({
      showBanner: false,
    });
  }
}

顶级组件的渲染方法：

render() {
  return (
    <div ref={elem => this.nv = elem}>
      <Header/>
      <Body
        userInfo={this.props.userInfo}
        history={this.props.history}
      />
      {
        this.state.showBanner && <Banner/>
        || null
      }
    </div>
  )
}

我没有看到任何日志，滚动时显然没有调用setState。

关于如何实现预期目标的任何建议？

*更新* 更改了componentDidMount以在窗口上添加事件侦听器，现在它正在运行。

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

Answer 1

原因是因为您正在尝试向尚未存在的引用添加事件侦听器。 componentDidMount在初始渲染之前发生。这意味着您在渲染中分配的引用尚未设置。

您可以使用ref回调并在其中附加事件监听器：

applyRef = ref => {
  this.vn = ref;
  this.vn.addEventListener('scroll', this.handleScroll);
}
render() {
  return (
    <div ref={this.applyRef}>
      <Header/>
      <Body
        userInfo={this.props.userInfo}
        history={this.props.history}
      />
      {
        this.state.showBanner && <Banner/>
        || null
      }
    </div>
  )
}

如何在react.js中

1 个答案: