イベントリスナーの追加/削除

Question

何らかの理由により、this.getVisible()がスクロール/サイズ変更イベントで起動していません。誰かが問題が何であるか教えてもらえますか？

import React, { Component } from 'react' 

const ZeroSum = ({ 
    selector, 
    ...passedProps, 
}) => WrappedComponent => class WithZeroSum extends Component { 
    constructor(props) { 
    super(props) 
    this.selector = document.querySelector(selector) 
    this.state = { 
     zeroSum: 0, 
    } 
    } 

    componentWillMount() { 
    window.addEventListener('scroll resize',() => this.getVisible()) 
    this.getVisible() 
    } 

    componentWillUnmount() { 
    window.removeEventListener('scroll resize',() => this.getVisible()) 
    } 

    getVisible() { 
    const vHeight = document.documentElement.clientHeight 
    const eTop = this.selector.getBoundingClientRect().top 
    return this.setState({ zeroSum: Math.max(0, vHeight - eTop) }) 
    } 

    render() { 
    const { zeroSum } = this.state 
    const props = { ...this.props, ...passedProps } 
    console.log(zeroSum) 
    return <WrappedComponent {...props} zeroSum={zeroSum} /> 
    } 
} 

export default ZeroSum 

Answer 1

あなたはそれに複数のイベント・タイプを渡すことはできません。これを試してみてください：

constructor(props) { 
    // ... 
    this.state = { 
     // ... 
     listener: this.getVisible.bind(this) 
    }; 
} 

componentWillMount(){ 
    window.addEventListener("scroll", this.state.listener); 
    window.addEventListener("resize", this.state.listener); 
    this.state.listener(); 
} 

componentWillUnount(){ 
    window.removeEventListener("scroll", this.state.listener); 
    window.removeEventListener("resize", this.state.listener); 
} 

Answer 2

constructor(props) { 
super(props) 
this.selector = document.querySelector(selector) 
this.state = { 
    zeroSum: 0, 
} 
    this.getVisible.bind(this) // bind all your class methods to this 

}