Reactjs 打开模式时隐藏画布线

我想在模态打开时隐藏画布

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;

我正在使用这个模式依赖项：

父组件包含画布。 当发生以下情况时，子组件可能会使画布与父组件分离： 模式已打开

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;

我在OpenModel函数的子组件中尝试了这种方法。 但它不起作用

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

我有这个应用程序组件与画布线。 这是父组件

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;

类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.drawCanvas=this.drawCanvas.bind（this）
}
drawCanvas（）{
//下面是绘制画布的代码。
//这不需要显示
}
componentDidMount（）{
this.drawCanvas（）
}
render（）{
返回(
)
}
}
导出默认应用程序；

因此，我有一个子组件，可以在其中打开一个模态。此子组件可能会从父组件中删除画布，以便在打开模式时取消显示

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;

import React，{Component}来自“React”
从“axios”导入axios
从“反应响应模态”导入模态；
类内部扩展组件{
建造师（道具）{
超级（道具）
开放：假
}
}
onOpenModal=（）=>{
this.setState（{open:true}）；
//这是我试图隐藏的代码
//画布
document.querySelector（“#canvas”）.style.display=“无”
};
onCloseModal=（）=>{
this.setState（{open:false}）；
};     
render（）{
const{open}=this.state；
返回(
开放模态

这里是模态文本

)
}      
}
导出默认内部；

您可以使用状态提升将打开状态获取到您的

应用程序

类中，并防止在渲染中绘制画布：

将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;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.drawCanvas=this.drawCanvas.bind（this）；
this.state={modalOn:false}；
}
drawCanvas（）{
//下面是绘制画布的代码。
//这不需要显示
}
/**新的**/
modalToggled=（打开）=>{
this.setState（{modalOn:on}）；
}
componentDidMount（）{
this.drawCanvas（）
}
render（）{
返回(
{this.state.modalOn&&}
)
}
}
导出默认应用程序；

现在更改内饰的调用，如下所示：

<Interiores onModalToggle={this.modalToggled} />

现在，在Interiors类中，添加对提升函数的调用：

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;

import React，{Component}来自“React”
从“axios”导入axios
从“反应响应模态”导入模态；
类内部扩展组件{
建造师（道具）{
超级（道具）
开放：假
}
}
onOpenModal=（）=>{
this.setState（{open:true}）；
this.props.onModalToggle（true）；
};
onCloseModal=（）=>{
this.setState（{open:false}）；
this.props.onModalToggle（false）；
};     
render（）{
const{open}=this.state；
返回(
开放模态

这里是模态文本

)
}      
}
导出默认内部；

---

另外，您不需要手动将其绑定到drawCanvas，只需将drawCanvas声明为胖箭头函数

drawCanvas=（）=>{}

，就不需要使用.bind（）。

您可以使用道具来实现

父组件

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

在构造函数中声明布尔属性，以在父组件中最初显示画布-

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

您在父级中有

内部

组件。给它一个道具

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

由于道具总是传递给子组件，因此您可以通过多种方式受益。如果您注意到，我们已经将函数

hideCanvas（）

声明为

App（Parent）Component

中的prop-to-Child组件

---

现在，无论何时打开模型，都可以通过直接调用props函数调用此方法来隐藏画布。

解决方案如下：

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

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