我有一个基本上固定标题的 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
这里不正确?
最佳答案
我认为这就是你所缺少的。
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() 一起使用的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45721205/