Question

我正在使用react和lodash的debounce方法。我遇到的问题是用户调整窗口大小时正在更新状态。

我遇到的问题是，当用户在此函数中调整窗口大小时，this是指window，而不是组件。

window.addEventListener('resize', this.delayedCallback)

我尝试设置const that = this等，但是无法获得正确的范围。有人知道如何解决此问题吗？

请参见下面的代码：

class Card extends Component {

  constructor(props) {
    super(props)
    this.state = {
      cardElWidth: null
    }
    this.delayedCallback = debounce(this.setCardWidth, 1000);
    this.CardEl = React.createRef()
  }

  componentDidMount () {
    this.setCardWidth()
    window.addEventListener('resize', this.delayedCallback)
  }

  setPlayerCardWidth() {
    this.setState({
      cardElWidth: this.CardEl.current.offsetWidth
    })
  } ... rest of code

Answer 1

在构造函数中将setCardWidth方法绑定到this：

constructor(props) {
  super(props)
  this.state = {
    cardElWidth: null
  }
  this.setCardWidth = this.setCardWidth.bind(this)
  this.delayedCallback = debounce(this.setCardWidth, 1000)
  this.CardEl = React.createRef()
}

或者通过直接绑定在反跳表达式中而变得更短：

constructor(props) {
  super(props)
  this.state = {
    cardElWidth: null
  }
  this.delayedCallback = debounce(this.setCardWidth.bind(this), 1000)
  this.CardEl = React.createRef()
}

您可以将setCardWidth转换为class属性，并使用箭头函数自动绑定至this，而不是在构造函数中使用bind。

注意：这需要babel的plugin-proposal-class-properties。

setPlayerCardWidth = () => {
  this.setState({
    cardElWidth: this.CardEl.current.offsetWidth
  })
}

如果使用类属性，则也可以删除构造函数：

class Card extends Component {
  state = {
    cardElWidth: null
  }

  CardEl = React.createRef()

  componentDidMount() {
    this.setCardWidth()
    window.addEventListener('resize', this.delayedCallback)
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.delayedCallback)
  }

  delayedCallback = debounce(this.setCardWidth, 1000)

  setPlayerCardWidth = () => {
    this.setState({
      cardElWidth: this.CardEl.current.offsetWidth
    })
  }
}

反跳并反应窗口大小调整此参考问题

1 个答案: