Wie kann ich Elemente in React Using State dynamisch ein- oder ausblenden?

So zeigen oder verbergen Sie ein Element in React

Das Problem

Anfänger haben oft Schwierigkeiten, Elemente in React mithilfe von Klickereignissen anzuzeigen oder zu verbergen. Dieser Leitfaden stellt eine native React-Lösung bereit, sodass keine externen Bibliotheken erforderlich sind.

Beispielcode

Betrachten Sie den folgenden React-Code:

<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>

Lösung

Unter Verwendung der neuesten React-Funktionen umfasst die Lösung:

React State Management

Nutzen Sie die Status-Hooks von React, um das Umschalten zwischen Anzeigen und Ausblenden des Elements zu handhaben. Die Statusverwaltung bestimmt, ob das Element gerendert werden soll oder nicht.

Komponentencode

<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>

Wichtige Erkenntnisse

• Die Statusverwaltung ermöglicht dynamisches Rendern basierend auf Benutzerinteraktion.
• Durch die Aktualisierung des Status rendert React die betroffenen Komponenten effizient neu.
• Diese Lösung ist ein vielseitiger Ansatz, der auf verschiedene Szenarien angewendet werden kann, die eine Kontrolle der Elementsichtbarkeit in React erfordern.

Das obige ist der detaillierte Inhalt vonWie kann ich Elemente in React Using State dynamisch ein- oder ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!