REACT Reagieren Sie, wie Sie nach einem Rückruf auf das richtige "this" zugreifen können

Question

Ich habe vor kurzem angefangen, React zu lernen, und nachdem ich einen Callback an ein Kindelement angehängt habe, habe ich den Verweis "this" im Elternelement verloren. Ich baue eine einfache Aufgabe und wenn es überprüft wird. Ich sende es zurück zum Elternteil, damit der Elternteil es löschen kann und den Zustand dem neuen Array ohne das Element neu zuweisen kann. Ich habe jedoch keinen Zugriff auf this.state.todosTask. Ich werde undefiniert. Unten ist mein Code.

Parent Element TodoList 

constructor(props){ 
    super(props); 
    this.state ={ 
     todosTask: props.todos 
    } 
    } 
    handleCheckedTask(task){ 
    console.log("Now Im in the todost"+task) 
    this.state.todosTask //= Undefined 
    } 
    render(){ 
    return(
     <div> 
     <h4>Todo List</h4> 
     <div className="form-check"> 
     <label className="form-check-label"> 
      {this.state.todosTask.map((todoElement)=>{ 
       return <Todo todo={todoElement} key={todoElement.id} onCheckedTask={this.handleCheckedTask}/> 
      })} 
     </label> 
     </div> 
     </div> 
    ) 
    } 

Kinder Komponente

completed(event){ 
    let self = this 
    let task = self.props.todo.task 
    let id = self.props.todo.id 
    console.log(self.refs.complete) 
    this.props.onCheckedTask({id:id,task:task}) 
    } 
    render(){ 
    return(
     <div> 
     <input 
     className="form-check-input" 
     type="checkbox" 
     ref="complete" 
     onChange={this.completed.bind(this)}/> 
     {this.props.todo.task} 
     </div> 
    ) 
    } 
} 

Answer 1

Sie müssen die handleCheckedTask im Konstruktor an diese binden.

Erläuterung: In JavaScript sind Funktionen und Methoden nicht wie in anderen Sprachen an das enthaltene Objekt gebunden. In Javascript this ist dynamisch, und es bedeutet (meistens) "der Aufrufer der Funktion". In den meisten Fällen macht das keinen Unterschied, da wir die Methode normalerweise über das enthaltene Objekt aufrufen, wie in console.log("foo"). Aber manchmal möchten wir die Funktion als Callback übergeben. In diesem Fall ist der Aufrufer nicht das Objekt, in dem er definiert wurde, sondern der, der den Callback verwendet. Zum Glück haben wir zwei Möglichkeiten, dieses Problem zu beheben:

1. Bindung des Verfahrens auf ein Objekt, mit .bind()
2. Nicht this an die Funktion übergeben und aus dem lexikalischen Kontext erhalten. (d. h. Verwenden einer Pfeilfunktion).

.

constructor(props){ 
    super(props); 
    this.state = { 
     todosTask: props.todos 
    }; 
    this.handleCheckedTask = this.handleCheckedTask.bind(this); 
} 

Alternativ können Sie Ihren Handler mit einem Property Initializer definieren.

handleCheckedTask = (task) => { 
    console.log("Now Im in the todost"+task) 
    this.state.todosTask //= Undefined 
    } 

können Sie die Details überprüfen here

Edit: ich das Teil entfernt, wo ich sagte, dass der Anrufer des Rückrufs das Objekt ist, dass es aufgerufen wird. Normalerweise für Rückrufe ist this undefined für normale Funktionen (nicht Pfeilfunktionen). Für Pfeilfunktionen wird this aus dem Abschluss wiederhergestellt, dh aus dem lexikalischen Kontext, in dem es definiert wurde.

Answer 2

ES6 hat nicht automatisch diese Bindung. Dies sollte im Konstruktor manuell gebunden werden.