时间戳

首页 > 解决方案 > 模式打开时隐藏画布线

reactjs - 模式打开时隐藏画布线

问题描述

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

我正在使用这种模式依赖： 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;

标签： reactjs

解决方案

你可以用道具来做。

父组件

在构造函数中声明一个布尔属性以在父组件中初始显示 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 总是传递给子组件，因此您可以通过多种方式获得它的好处。如果你注意到我们已经hideCanvas()在App (Parent) Component.

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

推荐阅读