在Mobx存储反应中更新身体样式

时间:2019-05-05 12:24:51

标签: javascript reactjs mobx mobx-react

我有一个模态组件(React),可以通过mobx存储中的open,close方法观察变化。

打开时,我需要设置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
}

1 个答案:

答案 0 :(得分:0)

使用mobx反应似乎可以解决我的用例

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