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值。但是，我在我的控制台中注意到，当滚动div时，_handleScroll()函数会一直被触发，即使我没有主动滚动/与窗口交互。当我输入此内容时，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

ReactJS：使用setState（）和onScroll（）的问题

1 个答案: