Ausführliche Erläuterung der vier Möglichkeiten, Ereignisse in React daran zu binden

In diesem Artikel werden hauptsächlich die vier Methoden zur Ereignisbindung in React vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

In der React-Komponente zeigt der Kontext jeder Methode auf die Instanz der Komponente, das heißt, diese wird automatisch an die aktuelle Komponente gebunden, und React speichert diese Referenz auch zwischen, um die maximale CPU zu erreichen Änderung der Speicherkapazität. Bei Verwendung der es6-Klasse oder einer reinen Funktion ist diese automatische Bindung nicht mehr vorhanden.

Die React-Ereignisbindung ähnelt der DOM-Ereignisbindung, der Unterschied ist wie folgt:

1. React-Ereignisse werden in Kamelbuchstaben und DOM-Ereignisse in Kleinbuchstaben benannt

2. Übergeben Sie über jsx eine Funktion als Ereignishandler anstelle einer Zeichenfolge.

3. React-Ereignisse können Standardereignisse nicht verhindern, indem sie „false“ zurückgeben. Sie müssen „preventDefault()“ explizit aufrufen:

<a href="#" onclick="console.log(&#39;The link was clicked.&#39;); return false">
Click me
</a>

class ActionLink extends React.Component {
constructor(props) {
super(props);
}

handleClick(e) {
e.preventDefault();
console.log(&#39;The link was clicked.&#39;);
}

render() {
return (
<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
);
}

}

ps: Es gibt keine Methode in Die React-Komponentenklasse ist standardmäßig an die Komponenteninstanz gebunden und muss manuell gebunden werden.

Im Folgenden sind mehrere Bindungsmethoden aufgeführt:

BindungsmethodeDirekte Bindung ist bind(this) Bindung, aber die Das dadurch verursachte Problem besteht darin, dass bei jedem Rendering die Bindung erneut erfolgt ist, dass es nur einmal gebunden werden muss, sodass keine erneute Bindung erforderlich ist, wenn es gerendert wird. Es ist nicht erforderlich, erneut zu binden, wenn die Funktion an anderer Stelle wiederverwendet wird

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del.bind(this)}></span>
   </p>
  );
 }
}

:: Nicht möglich Parameter übergebenWenn Sie keine Parameter übergeben, können Sie Doppelpunkte verwenden

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
  this.del=this.del.bind(this)
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del}></span>
   </p>
  );
 }
}

PfeilfunktionsbindungDie Pfeilfunktion ist nicht nur der „syntaktische Zucker“ der Funktion, sie bindet auch automatisch das, was den Umfang dieser Funktion definiert, da wir die Methode nicht mehr daran binden müssen:

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={::this.del}></span>
   </p>
  );
 }
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel: Beispiel für die von vue implementierte Funktion zum Hochladen von Bildern in die Datenbank und Anzeigen auf der Seite

Danach Lösung des Problems der Verwendung des vue.js-Routings. Ungültiges Problem

Wie man Daten in js perfekt analysiert

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der vier Möglichkeiten, Ereignisse in React daran zu binden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!