React.js - übergebene Funktion "keine Funktion" Fehler

Question

Ich versuche Requisiten von einer Kindkomponente zu einer Elternkomponente zu übergeben, aber aus irgendeinem Grund bekomme ich den Fehler "TypeError: this.props.onClick ist nicht eine Funktion "in der js-Konsole nach dem Klicken auf die gerenderten untergeordneten Komponenten.

Grundsätzlich versuche ich eine Liste von Kategorien zu verwalten, in denen eine Kategorie-Unterkomponente die 'ausgewählte' Eigenschaft als wahr hat und jedes Mal korrekt aktualisiert wird, wenn Sie auf eine Kategorie li klicken.

Hier ist ein jsfiddle mit dem Code: http://jsfiddle.net/kb3gN/8023/

ich nicht wirklich das Gefühl, dass ich die Konzepte verstanden haben, wie React.js effektiv zu nutzen, noch, so ist jede Hilfe dankbar!

Beste Grüße und Dank im Voraus,

bnunamak

Code:

var CategoryList = React.createClass({ 

getInitialState:function(){ 
    return { 
     items:[ 
      ["cat1", false], 
      ["cat2", true] 
     ], 
     lastToggled:["cat2"] 
    } 
}, 

//Function passed to child (changes items state) 
handleClick:function(child){ 
    var tempItems = this.state.items; 
    if(this.state.lastToggled[0] === child.props.name){ 
     var index = this.getInd(this.state.tempItems, child.props.name); 
     tempItems[index][1] = !tempItems[index][1]; 

     this.setState({items: tempItems}); 
    }else{ 
     var newIndex = this.getInd(this.state.tempItems, child.props.name); 
     tempItems[newIndex][1] = !tempItems[newIndex][1]; 

     var oldIndex = this.getInd(this.state.tempItems, this.state.lastToggled[0]); 
     tempItems[oldIndex][1] = false; 

     this.setState({items: tempItems, lastToggled: tempItems[newIndex][0]}); 

    } 
}, 

//getInd not relevant to problem 
getInd:function(arr, elname){ 
    for (var i = arr.length - 1; i >= 0; i--) { 
     if(arr[i][0] === elname){ 
      return i; 
     } 
    }; 
    return -1; 
}, 

render:function(){ 
    return (<ul className="category-list"> 
     { 
      this.state.items.map(function(item){ 
       return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />; 
      }) 
     } 
     </ul>) 
} 

}); 


var Category = React.createClass({ 

render:function(){ 
    if(this.props.selected){ 
     return (<li onClick={this.propogateClick} className="selected">{this.props.name}</li>); 
    }else{ 
     return (<li onClick={this.propogateClick}>{this.props.name}</li>); 
    } 
}, 

propogateClick: function(){ 
    this.props.onClick(this); 
} 

}); 


React.renderComponent(<CategoryList/>, document.getElementById('example')); 

Answer 1

Anscheinend ist es ein Bereich geht es hier:

this.state.items.map(function(item){ 
      return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />; 
     }) 

Wenn ich die äußere Karte entfernen und fügen Sie eine generische Kategorie hinzu, die funktioniert (gut, es gibt andere Probleme, aber die Klickfunktion ist s erfolgreich bestanden).

Ich muss die Funktion auf andere Weise übergeben (indem Sie this.handleClick nicht verwenden).

Answer 2

Sie können binden, um dieses Problem

this.state.items.map(function(item){ 
    return <Category onClick={this.handleClick} name={item[0]} selected={item[1]} />; 
}.bind(this)) 

zu lösen