Reactjs onScroll event not responding

Question

我知道這個問題已經回答了很多次，但我的挑戰是奇特的，因爲我已經嘗試了所有的答案，但沒有運氣。 這裏是我的代碼

export default class scrollLogic extends Component{ 
    constructor(props) { 
     super(props); 
     this.state={ 
      scroll:false 
     }; 
     this.scrollDetector=this.scrollDetector.bind(this) 
    } 

    scrollDetector(ev) { 
     console.log("Scrolling!"); 
    } 
    componentDidMount() { 
     const list = ReactDOM.findDOMNode(this.refs.list) 
     list.addEventListener('scroll', this.scrollDetector); 
    } 
    componentWillUnmount() { 
     const list = ReactDOM.findDOMNode(this.refs.list) 
     list.removeEventListener('scroll', this.scrollDetector); 
    } 
render() { 
     return (
      <div ref="list" className="header-holder"></div> 
) 
} 
} 

Answer 1

我意識到onScroll事件應該只用於容器本身有一個滾動條，所以使用window.addEventListener('scroll', this.scrollDetector)代替解決了這個問題。它聽取窗口本身的滾動而不是div。

，所以我已經格式化我的代碼看起來像這樣

export default class scrollLogic extends Component{ 
    constructor(props) { 
     super(props); 
     this.state={ 
      scroll:false 
     }; 
     this.scrollDetector=this.scrollDetector.bind(this) 
    } 

    scrollDetector() { 

     this.setState({ 
       scroll:true 
     }) 
    } 
    componentDidMount() { 
     const list = ReactDOM.findDOMNode(this.refs.list) 
     window.addEventListener('scroll', this.scrollDetector); 
    } 
    componentWillUnmount() { 
     const list = ReactDOM.findDOMNode(this.refs.list) 
     window.removeEventListener('scroll', this.scrollDetector); 
    } 
render() { 
     return (
      (this.state.scroll)? <HeaderMin/>:<HeaderMax/> 
) 
} 
} 

我希望這可以幫助別人..

Answer 2

我想這個問題是您正在使用componentDidMount方法的組件已經呈現後調用。嘗試使用componentWillMount而不是使用componentDidMount。