React.js - Geçirilen işlev "bir işlev değil" Hata

Question

Bir alt bileşenden bir üst bileşene kadar olan bölümleri geçirmeye çalışıyorum, ancak bir nedenden dolayı hatayı alıyorum "TypeError: this.props.onClick değil Bir fonksiyon "js konsolunda işlenen çocuk bileşenlerine tıkladıktan sonra.

Temel olarak, yapmaya çalıştığım kategori, bir kategori alt bileşeninin 'seçili' özelliklinin doğru olduğunu ve kategoriyi her tıkladığınızda doğru olarak güncellendiği kategorilerin listesini yönetmektir. Öyle bir Yardım takdir etkili henüz React.js nasıl kullanılacağına ilişkin kavramları kavradı uğratmış gibi gerçekten hissetmiyorum http://jsfiddle.net/kb3gN/8023/

: Burada

koduyla bir jsfiddle olduğunu! peşin

Saygılarımızla ve sayesinde

bnunamak

Kodu:

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

Ben dış haritayı kaldırırsanız:

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

Görünen o ki burada bir kapsam konudur ve çalıştığı genel bir kategori ekle (iyi, başka sorunlar var, ancak tıklama işlevi s baştan sona geçti).

Bu işlevi başka bir şekilde (this.handleClick kullanmadan) geçirmeliyim.

Answer 2

Bu sorunu

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

çözmek için bağlama kullanabilirsiniz