這個關鍵字在React.js

有功能這個關鍵字在React.js

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元素一樣）。現在它只是在沒有傳遞「索引」參數的情況下運行，也沒有通過點擊事件。

來源

2016-07-22 congressor

也許你忘了綁定事件處理程序所需的背景？而且，'renderSong'函數在渲染時立即執行，所以除非它本身返回一個函數，否則這也會導致問題。只需將其包裝在箭頭功能中即可。 – oens

我相信@oens是在正確的軌道上。在提交答案後才注意到他的評論，但它可能會說明他所指的是什麼。 – abigwonderful

您需要綁定這樣的：

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功能在一個箭頭函數中，以便它在渲染時不立即執行：

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

來源

2016-07-22 21:02:34 abigwonderful

非常感謝！它現在幾乎可以工作了））當頁面準備好時，changeSong完成三次（就像我有div元素一樣），但是當我點擊它時沒有任何反應。它只是console.log（）函數。我能做什麼錯？ – congressor

@congressor嗯，這是一個艱難的回答，沒有看到你的代碼的其餘部分 – abigwonderful

明白了。它只是運行我的changeSong函數3次，但我需要它通過點擊事件與索引參數運行，所以它調用changeSong：function（index）{this.setState（{currentSongIndex：index}我怎麼能這樣做？ – congressor

當使用普通的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

來源

2016-07-22 21:04:08 CaptEmulation

比我的回答更好的描述和例子！ – abigwonderful

或者你可以使用沒有上下文的箭頭函數... arr.map（（item，index）=> {...}） – Skay

謝謝非常感謝!!我非常感謝你的幫助！ – congressor

你應該結合上下文使用.bind(...)this或通過提供上下文參數.map(...)。還要確保你提供一個適當的功能作爲你的事件處理程序。特別是，包處理程序中的箭頭機能得以正常傳遞事件時派遣index，

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

來源

2016-07-22 21:08:00 oens

非常感謝你!!我真的很感謝你的幫助！ – congressor

這個關鍵字在React.js

回答

相關問題