Comment afficher ou masquer dynamiquement des éléments dans 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>

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>

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!