1
votes

Comment afficher / masquer un composant avec onClick défini sur l'élément d'un autre composant

Je voudrais afficher / masquer l'un des composants en cliquant sur l'élément (icône) des autres composants.

Je sais comment le faire à partir du même composant (lorsqu'un élément avec l'option onClick est sur le même composant), mais je ne sais pas comment faire référence à une telle option à partir d'autres composants.

J'ai Main .js composant où je voudrais masquer et afficher d'autres composants en cliquant sur un bouton de LeftMenu.

Composant Main.js:

<AnotherComponent />

Un autre composant dans laquelle je voudrais avoir l'option onClick:

<Tiles />

Par conséquent, lorsque je clique sur l'icône FaDropbox, je voudrais masquer

import React, { Component } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import FaHome from 'react-icons/lib/fa/home';
import FaDropbox from 'react-icons/lib/fa/dropbox';
import logo from './logo.png';
import './LeftMenu.css';
import  toggleDiv  from '../Main/Main'

class LeftMenu extends Component {
  render() {
    return (
          <div className="LeftMenu">
            {/* Base Layout */}
             <div className="LeftContainer">
              <Row className="justify-content-md-center">
              </Row> 
              <Row className="justify-content-md-center">
                <div className="LeftIcon">
                  <FaHome/>
                </div>
              </Row> 
              <Row className="justify-content-md-center">
                <div className="LeftIcon">
                <button onClick={ toggleDiv }><FaDropbox/></button>
                </div>
              </Row> 
            </div>
          </div> 
    );
  }
}

export default LeftMenu;

reactjs

2 commentaires

Pour ce faire, vous devez passer la fonction onclick comme accessoires à l'autre composant du composant principal

Si le LeftMenu est dans le composant Header, passez simplement la fonction comme accessoire à l'en-tête qui le passera au LeftMenu.

4 Réponses :

0
votes

Conservez l'état au niveau du parent de Main et LeftMenu. Ce processus s'appelle la levée de l'état.

Supposons que le parent de Main et LeftMenu soit ParentComponent.

Alors maintenant, à l'intérieur du composant parent, si vous maintenez l'état, vous pouvez le transmettre comme accessoire au composant principal et comme accessoire en cliquant sur le composant LeftMenu comme

const toggleVisibility = () => {
  this.setState(prevState=>({visible: !prevState.visible}));
}

La fonction toggleVisibility ressemblera maintenant à

<LeftMenu onClick={toggleVisibility}/>
<Main show={this.state.visible} />

0 commentaires

0
votes

utilisez redux ou utilisez context api, cela aidera à partager les valeurs d'un composant à un autre. API contextuelle: - https://reactjs.org/docs/context.html

0 commentaires

0
votes

C'est pourquoi il y a généralement une gestion d'état dans les applications React, que ce soit Redux, MobX, Flux, ReactN ou autre. La portée de vous dire comment introduire la gestion des états dans votre application serait trop grande, donc je propose une solution rapide à la place:

Wrapper

Donc, l'essentiel de ce problème est d'envelopper les deux Main et LeftMenu avec un composant wrapper (appelons-le LayoutWrapper ) qui gérera l'état show / hide pour eux. Cela ressemblerait à ceci:

class LayoutWrapper extends Component {
  constructor( props ) {
    super( props )
    this.state = { show: true };

    this.toggleDiv = this.toggleDiv.bind(this)
  }

  toggleDiv() {
    this.setState(prevState => ({ show: !prevState.show }))
  }

  render() {
    ...(your other components)...

    <Main showTiles={show} toggleDiv={toggleDiv}>
    <LeftMenu showTiles={show} toggleDiv={toggleDiv}>

    ...(rest of the code)...
  }
}

Donc, en un mot, vous augmentez l'état d'un niveau, puis le transmettez dans la chaîne de composants en tant qu'éléments, avec une fonction c'est capable de le changer.

J'espère que cela aide :)

PS: Mais comme je l'ai dit au début, ce serait un exemple parfait de pourquoi utiliser une bibliothèque de gestion d'état - le plus simple serait ReactN - peut-être devriez-vous essayer ?

0 commentaires

0
votes

J'espère que celui-ci pourra vous aider!

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

.toggleArea{
margin:10px;
padding:10px;
border:5px solid red;
}

const LeftMenu = (props) => (
 <button onClick={props.toggleComponents}>LeftMenu</button>
);

const Tiles = () => <div>Tiles</div>;
const AnotherComponent = () => <div>AnotherComponent</div>;

class Main extends React.Component{
  state ={
    isShowTiles:true
  };
  
  render(){
    return(
      <div>
         <LeftMenu toggleComponents={this.toggleComponents}/>
         <div class="toggleArea">
         {
           this.state.isShowTiles
             ? <Tiles />
             : <AnotherComponent/>
         }
         </div>
      </div>
    );
  }
  
  toggleComponents=()=>{
    this.setState({
     isShowTiles:!this.state.isShowTiles
    })
  }
}

ReactDOM.render(<Main/>, document.getElementById("root"));

1 commentaires

En général, c'est ce qui est nécessaire, mais cela m'ajoute un composant LeftMenu supplémentaire dans le composant principal qui duplique ce composant. Ce qu'il faut maintenant, c'est configurer une telle fonctionnalité pour l'icône FaDropbox dans le composant LeftMenu.