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-Lernhinweise: Daten-Engine

Sehen Sie sich die von der aktuellen Datenbank un...

Werfen wir einen Blick auf die Vorkompilierung von JavaScript (Zusammenfassung)

JS-Lauftrilogie js-Ausführungscode ist in drei Sc...

So legen Sie die Position des Blockelements in der Mitte des Fensters fest

So legen Sie die Position des Blockelements in de...

CSS Skills Collection – Klassiker unter den Klassikern

Entfernen Sie das gepunktete Kästchen auf dem Link...

Kennen Sie den Unterschied zwischen leerem Wert und Nullwert in MySQL

Vorwort Kürzlich habe ich festgestellt, dass die ...

Interaktion im Webdesign: Eine kurze Diskussion über Paging-Probleme

Funktion: Zur vorherigen Seite oder zur nächsten ...

Eigenschaften und Quellcode der Echarts-Legendenkomponente

Die Legendenkomponente ist eine häufig verwendete...

Lösung für die horizontale Bildlaufleiste im Iframe unter IE6

Die Situation ist wie folgt: (PS: Das rote Kästche...

DOCTYPE Dokumenttypdeklaration (unbedingt lesenswert für Webseiten-Liebhaber)

DOCTYPE-DEKLARATION: Oben auf jeder Seite, die Sie...

So erhalten/berechnen Sie den Offset eines Seitenelements mit JavaScript

Frage Durch Klicken auf ein Steuerelement wird ei...

Vue implementiert eine Wettervorhersagefunktion

In diesem Artikel wird der spezifische Code von V...

Detailliertes Tutorial zum Ersetzen von mysql8.0.17 in Windows 10

In diesem Artikel werden die spezifischen Schritt...

Vue SPA-Lösung zur Optimierung des ersten Bildschirms

Inhaltsverzeichnis Vorwort Optimierung SSR Import...

Einführung in die Verwendung von Requisiten in Vue

Vorwort: In Vue können Props verwendet werden, um...