ReactJS:将 setState() 与 onScroll() 一起使用的问题

Question

我有一个基本上固定标题的 React 应用程序 -- <AppHeader> -- 以及其余内容 -- <AppMain> .我想要做的是为 <AppHeader> 添加阴影当窗口滚动时。所以我附上一个 onScroll处理程序到 <AppMain> 周围的 DIV ，当我检测到它被滚动时，我设置了一个状态变量 scrolled , 传递给 <AppHeader> ，然后该组件可以处理添加适当的投影类。所以我的代码或多或少看起来像:

class App extends Component {
  _handleScroll(e) {
    console.log('scrolling:', e.target.scrollTop);
    if (e.target.scrollTop > 0) {
      this.setState({ scrolled: true });
    } else {
      this.setState({ scrolled: false });
    }
  }

  constructor(props) {
    super(props);

    this._handleScroll = this._handleScroll.bind(this);
    this.state = {
      scrolled: false
    };
  }

  render() {
    return (
      <div className="App">
        <AppHeader scrolled={this.state.scrolled} />
        <div className="AppMainScroll" onScroll={this._handleScroll}>
          <AppMain />
        </div>
      </div>
    );
  }
}

上面的代码运行良好，我的 <AppHeader>滚动窗口时获取适当的 prop 值。但是，我在控制台中注意到 _handleScroll()滚动 div 时，即使我没有主动滚动/与窗口交互，函数也会不断被触发。当我打字时，我的 console.log()在 _handleScroll()已经发射了 2000 次，而那个窗口甚至不在前景中。如果我一直滚动回到顶部， _handleScroll()不再被触发。

我在用 onScroll和 setState这里不正确？

Answer 1

我认为这就是你所缺少的。

componentDidMount() {
  window.onscroll = () => this._handleScroll()
}

_handleScroll() {
  console.log('scrolling:', document.documentElement.scrollTop);
  if (document.documentElement.scrollTop > 0) {
    this.setState({ scrolled: true });
  } else {
    this.setState({ scrolled: false });
  }
}

https://codesandbox.io/s/nk6o110464