Comment basculer la visibilité des éléments dans React ?

Afficher ou masquer un élément dans React

Dans une application React, vous devez souvent afficher ou masquer des éléments en fonction sur l’interaction des utilisateurs. Explorons comment y parvenir à l'aide de la fonctionnalité native de React. >

});

var Résultats = React.createClass({

handleClick: function (event) {
    console.log(this.prop);
},
render: function () {
    return (
        <div className=&quot;date-range&quot;>
            <input type=&quot;submit&quot; value=&quot;Search&quot; onClick={this.handleClick} />
        </div>
    );
}

});

React.renderComponent( , document.body);

render: function () {
    return (
        <div id=&quot;results&quot; className=&quot;search-results&quot;>
            Some Results
        </div>
    );
}

Dans cet exemple :

Le composant de recherche affiche un bouton qui déclenche la méthode handleClick.

Le composant Résultats représente l'élément que nous voulons basculer.

• Toggle Element State

• Pour basculer la visibilité de l'élément, nous devons maintenir État. Dans les versions modernes de React, nous pouvons utiliser le hook useState pour gérer l'état des composants :

const Search = () =&gt ; {</p> const [showResults, setShowResults] = useState(false)<p> const handleClick = () => setShowResults(true)</p> return (<p><br><br>)<br>}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>
  <input type="submit" value="Search" onClick={handleClick} />
  { showResults ? <Results /> : null }
</div>

Copier après la connexion

const Results = () => (

)

Some Results

ReactDOM.render(< ;Recherche />, document.querySelector("#container"))

Ici :

useState initialise une variable d'état (showResults) avec une valeur initiale (faux).

setShowResults est une fonction qui met à jour l'état showResults, déclenchant un nouveau rendu.

• Lorsque l'utilisateur clique sur le bouton, handleClick définit showResults sur true, rendant ainsi le composant Results.
• Cette approche fournit un moyen natif et efficace d'afficher ou de masquer des éléments dans les applications 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!