Wie schalte ich die Elementsichtbarkeit in React mithilfe der Statusverwaltung um?

Elemente in React anzeigen und ausblenden

React bietet verschiedene Ansätze, um die Sichtbarkeit von Elementen dynamisch basierend auf bestimmten Ereignissen oder Bedingungen zu steuern. Lassen Sie uns eine dieser Techniken untersuchen.

In Ihrem Code-Snippet möchten Sie die Ergebniskomponente ein- oder ausblenden, wenn auf die Schaltfläche der Suchkomponente geklickt wird. Um dies zu erreichen, können wir die von React bereitgestellten Statusverwaltungsfunktionen nutzen.

Verwendung von React Hooks (für React-Versionen 16.8)

Mit React Hooks können Sie den Komponentenstatus effektiver verwalten. Definieren Sie in Ihrer Suchkomponente eine Statusvariable namens showResults und legen Sie ihren Anfangswert auf „false“ fest. Verwenden Sie dann in der Funktion „handleClick“ den Setter „setShowResults“, um den Status auf „True“ zu aktualisieren und ein erneutes Rendern auszulösen.

<code class="javascript">import React, { useState } from 'react';

const Search = () => {
  const [showResults, setShowResults] = useState(false);

  const handleClick = () => {
    setShowResults(true);
  };

  return (
    <div className="date-range">
      <input type="submit" value="Search" onClick={handleClick} />
    </div>
  );
};</code>

In der Komponente „Ergebnisse“ können Sie bedingtes Rendern verwenden, um die Ergebnisse nur bei showResults anzuzeigen ist wahr.

<code class="javascript">const Results = () => {
  return (
    <div id="results" className="search-results">
      Some Results
    </div>
  );
};</code>

In Ihrer Rendermethode rendern Sie die Ergebniskomponente bedingt basierend auf dem Wert von showResults.

<code class="javascript">render() {
  return (
    <div>
      <Search />
      {showResults && <Results />}
    </div>
  );
}</code>

Das obige ist der detaillierte Inhalt vonWie schalte ich die Elementsichtbarkeit in React mithilfe der Statusverwaltung um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!