Окно debounce and response изменяет размер этой ссылки - PullRequest
Новая
       16

Окно debounce and response изменяет размер этой ссылки

0 голосов
/ 19 октября 2018

Я использую react и метод Лодаша 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

1 Ответ

0 голосов
/ 19 октября 2018

Привязать метод 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()
}

или еще короче, связав непосредственно в выражении debounce: 

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

Вместо использования bindв конструкторе вы можете преобразовать setCardWidth в свойство класса и использовать функцию стрелки для автоматического связывания с this.

Примечание: для этого требуется плагин babel-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
    })
  }
}
...