Wie binden "this" für react-Komponente Methode

Question

Ich kann nicht verstehen, warum this.click = this.click.bind(this) benötigt wird und was es tut.

class MyComponent extends React.Component { 
     constructor(props) { 
      super(props); 
      this.state = { 
       name: 'Initial State' 
      }; 
      this.click = this.click.bind(this); 
     } 
     click() { 
      this.setState({ 
       name: 'React Rocks!' 
      }); 
     } 
     render() { 
     return (
      <div> 
      <button onClick = {this.click}>Click Me</button> 
      <h1>{this.state.name}</h1> 
      </div> 
     ); 
     } 
    }; 

Answer 1

Wenn Sie nicht Verwendung bind() tat, als this.click() vom Ereignis-Listener genannt wurde, würde der Wert von thisnicht Ihre Reagieren Komponente (state und props usw. sind), aber stattdessen this wäre die Funktion this.click() selbst. Normalerweise wird bei jedem Aufruf einer Funktion der Ausführungskontext - der Wert this - auf die Funktion selbst gesetzt.

Natürlich ist das nicht so eine gute Sache, wenn Sie auf den Kontext Ihrer React-Komponente zugreifen möchten. bind() ist eine Möglichkeit, um sicherzustellen, dass eine Funktion mit demselben Ausführungskontext Ihrer Komponente ausgeführt wird und Sie innerhalb Ihrer Funktion auf this.state, this.props usw. zugreifen können. Eine weitere Möglichkeit ist es, die ES6 Pfeil Funktionsdeklaration zu verwenden:.

let foo =() => {console.log("bar")} 

, die automatisch den Wert von this für foo zu welchem ​​Kontext setzt die Funktion in deklariert wurde Wenn Sie foo im gleichen Kontext erklären als Komponente Reaktion, es behält diesen Kontext und stellt somit sicher, dass der Wert von this innerhalb von foo gleich ist.

Answer 2

Sie müssen es tun, weil die Callback-Funktion mit einem anderen context aufgerufen wird. Indem Sie .bind(this) ausführen, stellen Sie sicher, dass die Funktion immer mit derselben thiscontext als Ihre Komponente aufgerufen wird.

Editierte: per @ jered's Kommentar.

Answer 3

Ohne Sie sollten Sie undefiniert werden, wenn Sie Ihre click() Funktion aufrufen. Von der reaktiven Dokumentation ...

Sie müssen in JSX Callbacks auf die Bedeutung von diesem vorsichtig sein. In JavaScript sind Klassenmethoden nicht standardmäßig gebunden. Wenn Sie vergessen, binden Sie this.handleClick ein und übergeben Sie es an onClick, das ist undefined , wenn die Funktion tatsächlich aufgerufen wird.

Schauen Sie sich die Dokumentation für einige weitere Details hier: https://facebook.github.io/react/docs/handling-events.html

Answer 4

Gemäß React Documentation Bindung ist erforderlich, da Klassenmethoden nicht standardmäßig gebunden sind. Und wenn Sie einen Rückruf an einen Event-Handler ohne Bindung übergeben, ist 'dies' undefiniert.

Sie Eigenschaft initializers verwenden können, um Rückrufe zu binden:

class MyComponent extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      name: 'Initial State' 
 
     }; 
 
    } 
 
    handleClick =() => { 
 
     this.setState({ 
 
      name: 'React Rocks!' 
 
     }); 
 
    } 
 
    render() { 
 
     return (
 
      <div> 
 
      <button onClick = {this.handleClick}>Click Me</button> 
 
      <h1>{this.state.name}</h1> 
 
      </div> 
 
    ); 
 
    } 
 
};

Sie können auch eine Pfeil Funktion in den Rückruf verwenden:

class MyComponent extends React.Component { 
 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      name: 'Initial State' 
 
     }; 
 
    } 
 
    handleClick() { 
 
     this.setState({ 
 
      name: 'React Rocks!' 
 
     }); 
 
    } 
 
    render() { 
 
     return (
 
      <div> 
 
      <button onClick = {() => this.handleClick()}>Click Me</button> 
 
      <h1>{this.state.name}</h1> 
 
      </div> 
 
    ); 
 
    } 
 
};