React.js

Question

でこのキーワードは、私は私のdiv要素をクリックすることで、引数としてchangeSong機能通過インデックスを実行する必要がある機能

changeSong: function(index) { 
    this.setState({currentSongIndex: index }; 
} 

あります

var listTemp = data.map(function(item,index) { 

     var listTemp = data.map(function(item,index) { 

     return (
      <div key={index} className="eachTrack" onClick={this.changeSong({index})}> 
       <span className="duration">{item.duration}</span> 
       <a href="#" className="songTemplate" >{item.artist} - {item.track}</a> 

      </div> 
     ) 
    }.bind(this)) 

それはちょうど（のように私のchangeSong機能を3回実行します私がdiv要素を持つように）。今は単に "インデックス"引数を渡すことなく実行しているだけでなく、クリックしてイベントもありません。

var listTemp = data.map(function(item,index) { 
    return (
      <div key={index} className="eachTrack" onClick={this.changeSong({index})}> 
       <span className="duration">{item.duration}</span> 
       <a href="#" className="songTemplate" >{item.artist} - {item.track}</a> 

      </div> 
     ) 
    }.bind(this)) 

や地図機能にこのを渡す：：他の人と

var listTemp = data.map(function(item,index) { 
    return (
      <div key={index} className="eachTrack" onClick={this.changeSong({index})}> 
       <span className="duration">{item.duration}</span> 
       <a href="#" className="songTemplate" >{item.artist} - {item.track}</a> 

      </div> 
     ) 
    }, this) 

が指摘している、あなたはchangeSong機能をラップする場合がありますあなたはバインドにこれを必要とする

Answer 1

描画時に直ちに実行されないように矢印関数で描画します。

<div key={index} className="eachTrack" onClick={() => this.changeSong(index)}> 

Answer 2

プレーンES5 JavaScriptを使用する場合は、関数にthisを明示的にバインドする必要があります。幸いにも、Array.prototype.mapはthisコンテキストの第2引数をとります。

var listTemp = data.map(function(item,index) { 

     return (
      <div key={index} className="eachTrack" onClick={this.changeSong({index})}> 
       <span className="duration">{item.duration}</span> 
       <a href="#" className="songTemplate" >{item.artist} - {item.track}</a> 

      </div> 
     ) 
    }, this); // Passes in the parent `this` context to the map callback function 

Answer 3

あなたは.map(...)にcontext引数を供給することによって.bind(...)かを使用してthisためのコンテキストをバインドする必要があります。また、イベントハンドラとして適切な関数を提供していることを確認してください。具体的には、たぶん、あなたは、イベントハンドラのための適切なコンテキストをバインドするのを忘れて、適切にイベントディスパッチ時indexを渡すために、矢印の機能に

<div key={index} className="eachTrack" onClick={() => this.changeSong(index)}>