如何使用react将模式对话框置于全屏模式?

时间:2019-05-08 20:34:52

标签: reactjs

我必须在单击按钮时以全屏模式显示元素。这可行。但是,它不会以全屏模式呈现模式对话框。这是因为此模式对话框是在另一个名为modal_root的div中添加的元素,并且此内容div不在dom中呈现。如何确保该模式对话框也以全屏模式呈现?

下面是代码,

<body>
    <div id="root">
        <div class="content"></div>
    </div>
</body>

点击全屏按钮时,我会调用以下方法。

open_content_fullscreen = () => {
    let elem = document.querySelector('.content');
    if (elem.requestFullscreen) {
        elem.requestFullscreen();
    }
}

现在,当我单击某个按钮时说“编辑”时,它会打开模式对话框,该对话框是在div上使用modal_root类呈现的元素,而在dom中未显示内容div,如下所示,

<body>
    <div id="root">
        <div class="modal_root">
            <div class="dialog"></div>
        </div>
    </div>
</body>

我该如何解决。有人可以帮我吗谢谢。

1 个答案:

答案 0 :(得分:0)

直接从React组件与DOM交互时,通常需要通过ref进行交互。

这意味着您应该通过组件requestFullscreen()提供的DOM元素而不是ref返回的结果来调用querySelector()

例如,您可以重构代码以遵循以下模式:

/* An example "root component" */
class RootComponent extends React.Component {

  constructor(props) {
    super(props);

    /* Create a ref to the div that we want to access DOM element of */
    this.fullscreenModal = React.createRef();
  }

  openContentFullscreen = () => {    
      /* let elem = document.querySelector('.content'); */

      /* Access the element of "full screen" div: */
      const elem = this.fullscreenModal.current;

      /* Interact with it as a normal DOM element: */
      if (elem.requestFullscreen) {
          elem.requestFullscreen();
      }
  }

  render() {

      return <div>
        <button onClick={this.openContentFullscreen}>Open Fullscreen</button>

        <div ref={this.fullscreenModal}>
            Hello fullscreen world!
        </div>
      </div>
  }
}

有关refssee this documentation的更多信息-希望对您有所帮助!