ReactJS webpack babel: _this2 ist undefiniert wenn man auf die Schaltfläche klickt, deren Funktion über einen Parameter übergeben wird

Question

Zweifellos habe ich etwas wirklich Offensichtliches verpasst, aber ich versuche das lynda Tutorial "Learning React.js" zu machen, es ist ein bisschen anders, da ich ES6-Klassen verwende und mit Babel über Webpack transpiliere.

Das Problem ist die Ausführung einer Funktion , die als Parameter an die Note-Klasse von der Board-Klasse übergeben wird.

Ich habe eine „Note“ Klasse, die wie folgt beschrieben werden kann:

remove() { 
    this.props.onRemove(this.props.id); 
} 
//Notes class 
render() { 
    return (
     <div className="note"> 
      <p>{this.props.children}</p> 
      <span> 
       <button onClick={() => this.remove() }>X</button> 
      </span> 
     </div> 
    ); 
} 

Wo onRemove ist eine Funktion, die als Stütze von Vorstand übergeben wird wird wie folgt Hinweis:

//Method in Board class. I map through an array and call this function on each element to create notes. 
eachNote(note) { 
    return (
     <Note key = { note.id } id = { note.id } onRemove = { (id) => this.remove(id) }> 
      { note.note } 
     </Note> 
    ) 
} 

Die Methode remove() in der Board-Klasse sieht folgendermaßen aus:

Wenn ich eine Note der X-Taste klicken Sie tut die lokale Funktion in der Noten Klasse aus, sondern führen Sie dann nicht das Verfahren als eine Eigenschaft übergeben wird (onRemove()) und stattdessen erhalte ich (Firefox):

TypeError: _this2 is undefined 

und in Chrome erhalte ich:

Cannot read property 'remove' of undefined 

ich nicht, warum es nicht die Funktion allerdings nicht finden, habe ich einen vorherigen Tutorial, das dies tat genau das und es ist in der Lage, die Funktion in Ordnung zu finden. Ich habe wahrscheinlich etwas wirklich Einfaches übersehen.

[EDIT: Extra Vorstand Info]

//Board's render method 
render() { 
    return (
     <div className='board'> 
      { this.state.notes.map(this.eachNote) } 
     </div> 
    ); 
} 

In der Konsole gibt es das, was ich erwarte.

Answer 1

Wenn ich richtig verstehe, dass die "Kind" -Komponente den Klick händel, Aber der Klick propagiert nicht die Elternkomponente (Board).

In Board ändern Sie this.state (korrekt), aber übergeben an die "chil" -Komponente, "this" ändert sich.

Versuchen (Board): This.remove = this.remove.bind (this);

https://reactjs.org/docs/handling-events.html

Answer 2

nach einem Nachmittag alles unter der Sonne zu versuchen, würde Ich mag meine Lösung für den Fall, jemand zeigen, sonst dieses Problem hat.

Meine Rendermethode mappt durch ein Array von Notizen und erstellt von jedem Element. Das Problem war, dass ich kein "Notiz" -Objekt an die Funktion übergeben habe, die das Notizelement erstellt hat. So fixiert ich es von meinem Wechsel machen Methode dazu:

render() { 
    return (
     <div className='board'> 
      { this.state.notes.map((note) => this.eachNote(note)) } 
     </div> 
    ); 
} 

Ich bin nicht sicher, aber ich denke, das funktioniert, weil jede Schuldverschreibung Instanz hat es besitzen diese ihm gegeben. Wenn jemand eine bessere Erklärung hat, lass es mich wissen.