模式打开时隐藏画布线

Question

我想在打开模式时隐藏一个画布。

我正在使用这种模式依赖： https://react-responsive-modal.leopradel.com/#example

父组件包含画布。 子组件可能会使父组件的画布出现 模态已打开。

我尝试在 openModal 函数内部的子组件中这样做。 它没有用。

document.querySelector('#canvas').style.display = "none"

我有这个带有画布线的 App 组件。 这是父组件。

Class App extends Component {
  constructor(props) {
    super(props)
    this.drawCanvas = this.drawCanvas.bind(this)
  }


  drawCanvas() {
   // here is a code to draw the canvas. 
   // This does not need to be shown
  }

  componentDidMount() {
    this.drawCanvas()
  }


  render() {
    return (
      <div>
        <canvas id="canvas"></canvas>
        <div className="wrapper-all">
          <Coluna1 />
          <Coluna2 />
        </div>
      </div>
    )
  }
}


export default App;

因此，我有一个在其中打开模式的子组件。当模态打开时，这个子组件可能会从父组件中消失。

import React, { Component } from 'react'
import axios from 'axios'
import Modal from 'react-responsive-modal';   


class Interiores extends Component {
  constructor(props) {
    super(props)       
      open: false
    }
  }

  onOpenModal = () => {
    this.setState({ open: true });

  //Here is the code that i'm trying to hide 
  //the canvas
    document.querySelector('#canvas').style.display = "none"
  };

  onCloseModal = () => {
    this.setState({ open: false });
  };     

  render() { 
    const { open } = this.state;   
    return (
      <div>     
         <Modal open={open} onClose={this.onCloseModal} center>
           <button onClick={this.onOpenModal}>Open modal</button>            
          <p>   
            modal text here
          </p>
        </Modal>                   
        </div>                  
      </div>
    )
  }      
}

export default Interiores;

Answer 1

解决方法是这样的：

onOpenModal = () => {
  this.setState({ open: true });
    document.querySelector('#canvas').style.display = 'none'
};

onExited = () => {
   document.querySelector('#canvas').style.display = 'block'
}

Answer 2

您可以使用状态提升将打开状态放入您的App 类并防止在渲染中绘制画布：

https://reactjs.org/docs/lifting-state-up.html

将 modalToggled() 添加到您的应用中

Class App extends Component {
  constructor(props) {
    super(props);
    this.drawCanvas = this.drawCanvas.bind(this);
    this.state = {modalOn: false};
  }


  drawCanvas() {
   // here is a code to draw the canvas. 
   // This does not need to be shown
  }

  /** NEW **/
  modalToggled = (on) => {
    this.setState({modalOn: on});
  }

  componentDidMount() {
    this.drawCanvas()
  }


  render() {
    return (
      <div>
        {this.state.modalOn && <canvas id="canvas"></canvas>}
        <div className="wrapper-all">
          <Coluna1 />
          <Coluna2 />
        </div>
      </div>
    )
  }
}


export default App;

现在改变Interiores的调用如下：

<Interiores onModalToggle={this.modalToggled} />

现在到您的 Interiores 类，添加对提升函数的调用：

import React, { Component } from 'react'
import axios from 'axios'
import Modal from 'react-responsive-modal';   


class Interiores extends Component {
  constructor(props) {
    super(props)       
      open: false
    }
  }

  onOpenModal = () => {
    this.setState({ open: true });

    this.props.onModalToggle(true);
  };

  onCloseModal = () => {
    this.setState({ open: false });
    this.props.onModalToggle(false);
  };     

  render() { 
    const { open } = this.state;   
    return (
      <div>     
         <Modal open={open} onClose={this.onCloseModal} center>
           <button onClick={this.onOpenModal}>Open modal</button>            
          <p>   
            modal text here
          </p>
        </Modal>                   
        </div>                  
      </div>
    )
  }      
}

export default Interiores;

除了手动将它绑定到drawCanvas，你可以将drawCanvas声明为一个胖箭头函数drawCanvas = () => {}，然后你不需要使用.bind()。

Answer 3

你可以用道具来做。

父组件

在构造函数中声明一个布尔属性以在父组件中初始显示 Canvas -

constructor(props) {
    super(props)
    this.drawCanvas = this.drawCanvas.bind(this);
    this.state = { HideCanvas : false }
  }

您在父级中有Interiores 组件。给它一个道具

{!this.state.HideCanvas && <canvas id="canvas"></canvas> } //initially displaying canvas
<Interiores hideCanvas={() => this.setState({ HideCanvas:true })}/>

子组件

  onOpenModal = () => {
    this.setState({ open: true }, () => {
      this.props.hideCanvas(); //this will hide canvas in Parent component by using props.
    });
 };

由于 props 总是传递给子组件，因此您可以通过多种方式受益。如果你注意到我们在App (Parent) Component 中声明了一个函数hideCanvas() 作为子组件的道具。

现在当你打开模型时，你可以直接调用props的函数来调用这个方法来隐藏Canvas。