Wie kann ich ein Element in React mit nativen Funktionen ein- oder ausblenden?

Element in React anzeigen oder ausblenden

Frage

Beim Experimentieren mit React.js stößt ein Benutzer auf Schwierigkeiten beim Anzeigen oder Ausblenden eines Elements auf einem Seite durch Anklicken aufrufen. Sie fordern eine native React-Bibliothekslösung an, ohne auf externe Bibliotheken angewiesen zu sein.

Antworten

React circa 2020

Wir können den State Hook von React nutzen Aktualisieren Sie den Status der Komponente im onClick-Rückruf:

<code class="javascript">const Search = () => {
  const [showResults, setShowResults] = React.useState(false);
  const onClick = () => setShowResults(true);
  return (
    <div>
      <input type="submit" value="Search" onClick={onClick} />
      { showResults ? <Results /> : null }
    </div>
  );
};</code>

React circa 2016

Verwenden der Legacy-API von React:

<code class="javascript">var Search = React.createClass({
  getDefaultProps() {
    return { resultsHidden: true };
  },
  handleClick: function () {
    this.setState({ resultsHidden: false });
  },
  render: function () {
    return (
      <div className="date-range">
        <input type="submit" value="Search" onClick={this.handleClick} />
        { !this.props.resultsHidden ? <Results /> : null }
      </div>
    );
  }
});</code>

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