web-dev-qa-db-fra.com

React - Modification de la propriété CSS au clic (fonction flèche)

J'ai les éléments suivants dans l'un de mes fichiers React/Gatsby:

import React from "react"

const click = () => {
  console.log("J");
}

const NavButton = () => 
  <button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={click}>
    <div id="nav-icon1">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </button>

const Dropdown = () => 
<div style={{visibility: "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}>
</div>

export default (props) =>
  <div className="left col-xs-12 col-md-6">
    <Dropdown />
    <NavButton />
    {props.children}
  </div>

Maintenant, je voudrais déclencher click() chaque fois que quelqu'un appuie sur NavButton, puis je voudrais rendre Dropdown visible. Comment pourrais-je faire ça? À l'heure actuelle, je l'ai codé en dur que Dropdown a style={{visibility: "hidden", ....

Je me demande également si je fais cela correctement, en ayant tout lâchement dans ces différentes fonctions, si quelqu'un pouvait me dire que ce serait génial!

javascripthtmlcssreactjsgatsby
6
George Welder

Votre classe de contrôle doit être dynamique: elle doit maintenir l'état booléen pour savoir si la liste déroulante est ouverte ou fermée. Lors du rendu de la liste déroulante, si le booléen est ouvert, vous afficherez la liste déroulante, sinon vous ne le ferez pas.

Voici votre code réécrit pour ce faire. Notez que les composants enfants prennent les accessoires en argument. C'est ainsi que le parent communique avec lui. Certains de ces accessoires sont des rappels, c'est ainsi que l'enfant communique au parent.

import React from "react"

const NavButton = ({onClick}) => 
  <button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={onClick}>
    <div id="nav-icon1">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </button>

const Dropdown = ({show}) => 
<div style={{visibility: show ? "visible" : "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}>
</div>

export default class Parent extends React.Component {
  state = {
    dropdownVisible: false,
  };

  // toggles the dropdown each time it is called
  toggleDropdown = () => this.setState(state => ({
    dropdownVisible: !state.dropdownVisible,
  }));

  render() {
    return (
      <div className="left col-xs-12 col-md-6">
        <Dropdown show={this.state.dropdownVisible} />
        <NavButton onClick={this.toggleDropdown} />
        {this.props.children}
      </div>
    );
  }
}
9
Brandon