Reactjs onScroll 이벤트가 응답하지 않음

Question

이 질문에 대한 답변이 많이 접수되었지만 도전은 독특합니다. 모든 답변을 시도했지만 여전히 운이 없습니다. 여기 당신이 구성 요소가 렌더링 된 후라고 componentDidMount 방법을 사용하는 문제가 추측 내 코드

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을 사용해보십시오.