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:

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

4b9fb64e28bfa25ce78ce203c03210ee
Click me
5db79b134e9f6b82c0b36e0489ee08ed
class ActionLink extends React.Component {
constructor(props) {
super(props);
}
handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
render() {
return (
ce9b621fb6ec54951e7c0b38768a414bClick Me...5db79b134e9f6b82c0b36e0489ee08ed
);
}
}

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 (
   09d51344e61201747f3f0f261639e806
    c157f1b0f1442cd3850bd9da57d4d18e54bdf357c58b8a65c66d7c19c8e4d114
   94b3e26ee717c64999d7867364b1b4a3
  );
 }
}

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 :

Verwandte Empfehlungen:

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

Eine kurze Einführung in dies und sich selbst in PHP

Vier dieser Wertmodi in JS

So verwenden Sie dies in HTML-Tags

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!