React.js中的這個關鍵字

Question

有功能

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

我需要通過單擊div來運行將索引作為參數傳遞的changeSong函數

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元素一樣多）。 現在，它甚至沒有傳遞“ index”參數就運行了，單擊也沒有任何事件。

Answer 1

您需要將此綁定 ：

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函數包裝在箭頭函數中，以便它不會在render上立即執行：

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

Answer 2

您應該使用.bind(...)或通過向.map(...)提供context參數來this綁定上下文。 另外，請確保提供適當的函數作為事件處理程序。 特別是，將處理程序包裝在箭頭函數中，以在事件分派時正確傳遞index ，

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

Answer 3

使用純ES5 Javascript時，您需要this顯式綁定到函數。 幸運的是， Array.prototype.map 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); // Passes in the parent `this` context to the map callback function