Details zur Ereignisbindung reagieren

Details zur Ereignisbindung reagieren
  • Die React-Ereignisbindung ähnelt der nativen DOM-Ereignisbindung
  • Syntax: on+Ereignisname={Ereignishandler} Beispiel: onClick={()=>{}}
  • Hinweis: React-Ereignisse verwenden die CamelCase-Namenskonvention

Ereignisbindung von Klassenkomponenten

importiere React von „react“;
importiere ReactDOM von „react-dom“;
Klasse App erweitert React.Component {
  handleKlick() {
    konsole.log(111);
  }
  rendern() {
    return (<button onClick={this.handleClick} > Klick mich</button >)
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

Ereignisbindung der Funktionskomponente

importiere React von „react“;
importiere ReactDOM von „react-dom“;
Funktion App() {
  Funktion handleClick() {
    konsole.log(111);
  }
  // In der Funktionskomponente gibt es kein „this“, schreiben Sie also einfach den Funktionsnamen, ohne „this“ hinzuzufügen.
  return (<button onClick={handleClick}>Klick mich</button>)
}
ReactDOM.render(<App />, document.getElementById('root'))

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der React-Ereignisbindung
  • Die Implementierung der Ereignisbindung in React verweist auf drei Methoden
  • Detaillierte Erklärung von vier Möglichkeiten, dies an Ereignisse in React zu binden
  • Vergleich verschiedener Methoden der Ereignisbindung beim React-Lernen

<<:  9 praktische CSS-Eigenschaften, die Web-Frontend-Entwickler kennen müssen

>>:  Tutorials der MySQL-Reihe für Anfänger

Artikel empfehlen

MySQL-Optimierung: So schreiben Sie hochwertige SQL-Anweisungen

Vorwort Im Internet gibt es zahlreiche Informatio...

So verwenden Sie Verbindungen der Physik-Engine in CocosCreator

Inhaltsverzeichnis Mausgelenk Mausgelenk AbstandG...

Mysql-Sortierung und Paginierung (Order by & Limit) und vorhandene Fallstricke

Sortierabfrage (Sortieren nach) Im E-Commerce: Wi...

Docker erstellt Redis5.0 und mountet Daten

Inhaltsverzeichnis 1. Einfaches Einbinden persist...

Rundungsvorgang des Datums-/Uhrzeitfelds in MySQL

Inhaltsverzeichnis Vorwort 1. Hintergrund 2. Simu...

Die Hook-Funktion von Vue-Router implementiert Routing Guard

Inhaltsverzeichnis Überblick Globale Hook-Funktio...

JavaScript-Puzzlespiel

In diesem Artikelbeispiel wird der spezifische Ja...

Analyse von MySQL-Lock-Wait- und Deadlock-Problemen

Inhaltsverzeichnis Vorwort: 1. Verstehen Sie Lock...

So deinstallieren Sie Docker Toolbox vollständig

Docker Toolbox ist eine Lösung zur Installation v...

Tiefgreifendes Verständnis der Vue-cli4-Routing-Konfiguration

Inhaltsverzeichnis Vorwort - Vue Routing 1. Die g...

Grafisches Tutorial zur Installation von MySQL 5.7.17 (Windows)

Ich habe vor Kurzem mit dem Studium der Datenbank...

Connector-Konfiguration in Tomcat

JBoss verwendet Tomcat als Webcontainer. Die Konf...