我试图让页脚横幅仅在用户向下滚动超过页眉时显示，并在用户向上滚动到顶部时隐藏它。我对如何实现它的想法是在页面的顶部组件中为滚动事件添加一个事件监听器。这是我当前的代码。但它不起作用:
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方法:
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);
}
最佳答案
原因是因为您正在尝试向尚不存在的引用添加事件监听器。 componentDidMount 发生在初始渲染之前。这意味着您在 render 中分配的 ref 尚未设置。
您可以使用 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>
)
}
关于javascript - 如何在 react.js 中使组件在滚动时显示/隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48347872/