Comment basculer la visibilité des éléments dans React ?-js tutoriel-php.cn

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

Linda Hamilton

Libérer： 2024-11-06 01:29:02

original

1086 Les gens l'ont consulté

How to Toggle Element Visibility in 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>
    );
}

Copier après la connexion

});

React.renderComponent( , document.body);

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

Copier après la connexion

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

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!