Comment activer/désactiver la visibilité des éléments dans React à l'aide de la gestion des états ?

Afficher et masquer des éléments dans React

React propose plusieurs approches pour contrôler dynamiquement la visibilité des éléments en fonction d'événements ou de conditions spécifiques. Explorons l'une de ces techniques.

Dans votre extrait de code, vous souhaitez afficher ou masquer le composant Résultats lorsque vous cliquez sur le bouton du composant Recherche. Pour y parvenir, nous pouvons exploiter les capacités de gestion d'état fournies par React.

Utilisation des hooks React (pour les versions 16.8 de React)

Avec les hooks React, vous pouvez gérer l'état des composants plus efficacement. Dans votre composant Search, définissez une variable d'état appelée showResults et définissez sa valeur initiale sur false. Ensuite, dans la fonction handleClick, utilisez le setter setShowResults pour mettre à jour l'état sur true, déclenchant ainsi un nouveau rendu.

<code class="javascript">import React, { useState } from 'react';

const Search = () => {
  const [showResults, setShowResults] = useState(false);

  const handleClick = () => {
    setShowResults(true);
  };

  return (
    <div className="date-range">
      <input type="submit" value="Search" onClick={handleClick} />
    </div>
  );
};</code>

Dans le composant Résultats, vous pouvez utiliser le rendu conditionnel pour afficher les résultats uniquement lorsque showResults est vrai.

<code class="javascript">const Results = () => {
  return (
    <div id="results" className="search-results">
      Some Results
    </div>
  );
};</code>

Dans votre méthode de rendu, vous restituez conditionnellement le composant Résultats en fonction de la valeur de showResults.

<code class="javascript">render() {
  return (
    <div>
      <Search />
      {showResults && <Results />}
    </div>
  );
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!