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

So installieren Sie eine MySQL-Datenbank auf einem Debian 9-System

Vorwort Beim Anblick des Titels sollte sich jeder...

Detaillierter Prozess der NTP-Serverkonfiguration unter Linux

Inhaltsverzeichnis 1. Umgebungskonfiguration 1.NT...

React-Implementierungsbeispiel mit Amap (react-amap)

Die PC-Version von React wurde für die Verwendung...

CSS-Einstellung Div-Hintergrundbild-Implementierungscode

Das Hinzufügen einer Hintergrundbildsteuerung zu ...

Verständnis und Lösungen für 1px-Linien in der mobilen Entwicklung

Gründe, warum die 1px-Linie dicker wird Wenn wir ...

Ausführliche Erläuterung zum MySQL-Lernen einer Datenbanksicherung

Inhaltsverzeichnis 1.DB, DBMS, SQL 2. Eigenschaft...

Eine kurze Diskussion über Browserkompatibilitätsprobleme in JavaScript

Die Browserkompatibilität ist der wichtigste Teil...

Implementierung der MySQL-Datensortierung (aufsteigend und absteigend)

Datensortierung aufsteigend, absteigend 1. Sortie...

Detaillierte Beschreibung des HTML-Meta-Viewport-Attributs

Was ist ein Ansichtsfenster? Mobile Browser platzi...

JS erkennt den Fall der Eliminierung von Sternen

In diesem Artikelbeispiel wird der spezifische JS...