Maison > interface Web > js tutoriel > le corps du texte

Comment afficher ou masquer dynamiquement des éléments dans React Using State ?

Mary-Kate Olsen
Libérer: 2024-11-06 09:58:02
original
838 Les gens l'ont consulté

How to Dynamically Show or Hide Elements in React Using State?

Comment afficher ou masquer un élément dans React

Le problème

Les débutants rencontrent souvent des difficultés pour afficher ou masquer des éléments dans React à l'aide d'événements de clic. Ce guide fournit une solution React native, éliminant le besoin de bibliothèques externes.

Exemple de code

Considérez le code React suivant :

<code class="js">var Search = React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    },
});

var Results = React.createClass({
    render: function () {
        return (
            <div id="results" className="search-results">
                Some Results
            </div>
        );
    },
});

React.renderComponent(<Search />, document.body);</code>
Copier après la connexion

Solution

En utilisant les dernières fonctionnalités de React, la solution implique :

Gestion de l'état de React

Exploiter les hooks d'état de React pour gérer la bascule entre l'affichage et le masquage de l'élément. La gestion de l'état détermine si l'élément doit être rendu ou non.

Code du composant

<code class="js">const Search = () => {
  // Initialize state to hide results
  const [showResults, setShowResults] = React.useState(false);

  // Toggle results visibility on click
  const onClick = () => setShowResults(true);

  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  );
};

const Results = () => (
  <div id="results" className="search-results">
    Some Results
  </div>
);

// Render the component
ReactDOM.render(<Search />, document.getElementById('container'));</code>
Copier après la connexion

Principaux points à retenir

  • La gestion de l'état permet un rendu dynamique basé sur l'interaction de l'utilisateur.
  • En mettant à jour l'état, React restitue efficacement les composants concernés.
  • Cette solution est une approche polyvalente qui peut être appliquée à divers scénarios nécessitant un contrôle de la visibilité des éléments dans React.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!