Es gibt mehrere Möglichkeiten, Reaktionsereignisse daran zu binden

Dieses Mal werde ich Ihnen verschiedene Möglichkeiten vorstellen, Reaktionsereignisse daran zu binden. Welche Vorsichtsmaßnahmen gibt es, um Reaktionsereignisse daran zu binden?

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 existiert diese automatische Bindung nicht mehr. Wir müssen die Bindung hierfür manuell implementieren.

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 eines Strings.

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

ps: React-Komponentenklasse Die Methode bindet dies standardmäßig nicht an die Komponenteninstanz und muss manuell gebunden werden.

<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('The link was clicked.');
}
render() {
return (
<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
);
}
}

Im Folgenden sind mehrere Bindungsmethoden aufgeführt:

BindungsmethodeDirekte Bindung ist bind(this) Bindung, aber die Das dadurch verursachte Problem besteht darin, dass die Bindung jedes Mal neu gebunden wird, wenn sie gerendert wird >

Binden Sie dies im Konstruktor. Der Vorteil besteht darin, dass es nur einmal gebunden werden muss, sodass kein erneutes Binden erforderlich ist, wenn es 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>
  );
 }
}

:: Parameter können nicht übergeben werdenWenn 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>
  );
 }
}

Pfeilfunktionsbindung

Die Pfeilfunktion ist nicht nur der „syntaktische Zucker“ der Funktion, sie bindet auch automatisch das, was den Funktionsbereich

definiert, weil Wir müssen sie nicht mehr binden:

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>
  );
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesisch Webseite!

Empfohlene Lektüre: JS generiert QR-Code

JS implementiert zufälliges Umschalten der WeChat-ID

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>
  );
 }
}

String.prototype.format So verwenden Sie die Zeichenfolgenverkettung

Das obige ist der detaillierte Inhalt vonEs gibt mehrere Möglichkeiten, Reaktionsereignisse daran zu binden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!