Обновление стиля тела в реакции магазина mobx

У меня есть модальный компонент (React), который наблюдает за изменениями с помощью метода open, close в магазине mobx.

При открытии мне нужно установить document.body.style.overflow = 'hidden', чтобы сохранить модальную прокрутку. В завершение убираю скрытый стиль с тела.

@action open = () => {
    document.body.style.overflow = 'hidden'
}

@action close = () => {
    document.body.style.overflow = ''
}

Есть ли лучший способ сделать это с помощью autorun?

Я не могу понять, где вызвать автозапуск, вне класса магазина или внутри есть метод. Мне не повезло.

autorun(
  () => {
      document.body.style.overflow = this.isMaximized ? 'hidden' : ''
  },
  { name: 'bodyOverflowUpdate' }
)

Для справки, this.isMaximized - это вычисленное значение.

@computed
  get isMaximized() {
    return this.modalState.isOpen && !this.modalState.isMinimized
}

reactjs javascript mobx mobx-react
person yotke    schedule 05.05.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Использование реакции mobx похоже на решение моего варианта использования

setBodyOverflow = reaction(
    () => this.isMaximized,
    isMaximized => {
      document.body.style.overflow = isMaximized ? 'hidden' : ''
    },
    { name: 'setBodyOverflow' },
  )
person yotke    schedule 05.05.2019