Wie schalte ich die Elementsichtbarkeit in React um?

Element in React anzeigen oder ausblenden

In einer React-Anwendung müssen Sie häufig Elemente basierend auf ein- oder ausblenden auf Benutzerinteraktion. Lassen Sie uns untersuchen, wie Sie dies mithilfe der nativen React-Funktionalität erreichen können.

var Search= React.createClass({</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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>
    );
}

Nach dem Login kopieren

});

var Results = React.createClass({

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

});

React.renderComponent(

, document.body);

In diesem Beispiel:

• Suchkomponente rendert eine Schaltfläche, die die handleClick-Methode auslöst.
• Die Ergebniskomponente stellt das Element dar, das wir umschalten möchten.

Elementstatus umschalten

Um die Elementsichtbarkeit umzuschalten, müssen wir beibehalten Zustand. In modernen Versionen von React können wir den useState-Hook verwenden, um den Komponentenstatus zu verwalten:

const Search = () =&gt ; {<br> const [showResults, setShowResults] = useState(false)<br> const handleClick = () => setShowResults(true)<br> return (</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>

Nach dem Login kopieren