react.js - React怎么绑定scroll事件？

问题描述

问 题

我需要在页面组件渲染完成之后监听滚屏事件，但是试了几种写法，只有下面第一种会触发，其余的都不会触发，求解。

 componentDidMount() {
    // 触发
    window.addEventListener('scroll', this.orderScroll.bind(this));
    // document.body.addEventListener('scroll', this.orderScroll.bind(this)); 不触发
    // document.getElementById('userOrder').addEventListener('scroll', this.orderScroll.bind(this)); 不触发
    // this.refs.userOrder.addEventListener('scroll', this.orderScroll.bind(this)); 不触发
 }
 
 orderScroll() {
     console.log('scroll');
 }
 
 render() {
     return(
         <div id="userOrder" ref="userOrder">
             <div></div>
         </div>
     )
 }
 
 // 这样写同样不会触发
 // render() {
 //     return(
 //         <div onScroll={this.orderScroll.bind(this)}>
 //             <div></div>
 //         </div>
 //     )
 // }
 

问题2，照着 window.addEventListener('scroll', this.orderScroll.bind(this));这样绑事件绑定成功之后，在componentWillUnMount() 函数里却清除不掉

componentWillUnMount() {
    window.removeEventListener('scroll', this.orderScroll.bind(this));
}

解决方案

只有有滚动条的元素才能触发scroll事件。所以你这里面除了window之外当然都不触发。

清除的话，你的componentWillUnMount写错了，是componentWillUnmount。

这篇关于react.js - React怎么绑定scroll事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！