Ausführliche Erläuterung der vier Möglichkeiten, Ereignisse daran zu binden, finden Sie in den React_Javascript-Kenntnissen

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 CPU und Speicher zu maximieren. Bei Verwendung der ES6-Klasse oder einer reinen Funktion existiert diese automatische Bindung nicht mehr und wir müssen die Bindung manuell implementieren.

React-Ereignisbindung ähnelt der DOM-Ereignisbindung, die Unterschiede sind wie folgt:

1. React-Ereignisse werden in Kamelbuchstaben benannt, während DOM-Ereignisbenennungen in Kleinbuchstaben erfolgen

2. Übergeben Sie mit 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('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 bei jedem Rendern neu gebunden 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>
  );
 }
}

Bindung innerhalb des Konstruktors Die Der Vorteil der Bindung im Konstruktor besteht darin, dass sie nur einmal gebunden werden muss, wodurch eine erneute Bindung bei jedem Rendern vermieden 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 = {
  };
  this.del=this.del.bind(this)
 }
 del(){
  console.log('del')
 }
 render() {
  return (
   <p className="home">
    <span onClick={this.del}></span>
   </p>
  );
 }
}

:: Parameter können nicht übergeben werdenWenn Sie keine Parameter übergeben, können Sie auch Doppelpunkte verwenden

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

Pfeilfunktion Das Binden von Pfeilfunktionen ist nicht nur „syntaktischer Zucker“ für Funktionen, es bindet auch automatisch das, was den Umfang dieser Funktion definiert, da wir keine Methoden mehr an sie 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 ist der detaillierte Inhalt vonAusführliche Erläuterung der vier Möglichkeiten, Ereignisse daran zu binden, finden Sie in den React_Javascript-Kenntnissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!