React - 將點擊處理程序附加到動態子項目

我試圖在我的電子應用程序中使用react + flux來顯示播放列表。出於某種原因，我無法將單擊處理程序附加到每個播放列表項目。React - 將點擊處理程序附加到動態子項目

這裏是我的代碼：

var Playlist = React.createClass({ 

    render: function() { 
     var list = this.props.list; 
     var playlist = []; 

     for (var i = 0; i < list.length; ++i) { 
      playlist.push(
       <PlaylistItem song={list[i]} key={i} /> 
      ); 
     } 

     return (
      <ul className='playlist'> 
       {playlist} 
      </ul> 
     ) 
    } 

}); 

var PlaylistItem = React.createClass({ 

    _play: function() { 
     console.log(this.props.song); 
    }, 

    render: function() { 
     var song = this.props.song; 

     return (
      <li> 
       <div className='playBtn'> 
        <i className='fa fa-play' onClick={this._play}> 
        </i> 
       </div> 
       <div className='info'> 
        <div className='artist'>{song.artist}</div> 
        <div className='title'>{song.title}</div> 
       </div> 
       <div className='rmBtn'> 
        <i className='fa fa-minus-circle'> 
        </i> 
       </div> 
       <div className='time'>{song.time}</div> 
      </li> 
     ); 
    } 

});

我不明白爲什麼單擊處理程序永遠不會觸發。我希望當點擊i元素時，我會把歌曲對象放到控制檯上。

謝謝。

編輯：我做了一些實驗，每次我從商店獲得數據（甚至是假數據），點擊處理程序都不起作用。但如果我將假數據移動到根組件中，點擊處理程序正常工作。

我檢查過數組中的對象是多次相同的。

我不明白爲什麼會發生這種行爲。

有人嗎？

來源

2015-07-20 granra

似乎適合我工作，這裏是一個小提琴https://jsfiddle.net/5758b33y/。你確實已經在運行正確的字體了嗎？ – noveyak

是的，一切都看起來不錯，我只是沒有得到任何點擊處理程序在PlaylistItem中工作。 – granra

在我上面提到的小提琴中，當我點擊播放圖標時，我在控制檯中看到一條消息，它看起來像是您正在嘗試做的。你不明白嗎？ – noveyak

您需要的的onClick方法 onClick={this._play.bind(this)}

來源

2015-07-21 00:00:23 EmileKumfa

綁定只告訴功能「這」意味着什麼，並不會幫助我在這種情況下。 – granra

實際上，雖然這似乎是問題 - clickHandler失去了對PlaylistItem的引用 - 因此不知道「_play」是什麼。使用綁定「this」再次指向PlaylistItem並且可以調用該方法。 – flaky

-1

我曾經歷過這個問題，結合自己和解決，如下所示：https://stackoverflow.com/a/32623836/852872。希望這對你也有幫助。從該頁面

我沒有做過任何順藤摸瓜

回答爲什麼這並沒有爲我工作，但問題是，在我的主文件我進口作出反應，要求（「陣營'），但在其他組件上（如'React/addons'）。從react/addons處導入React後，所有內容都可以用作。

來源

2015-09-17 06:31:31 aemdy

如果此問題與您所鏈接的問題重複，請將其標記爲重複。否則，請提供此問題的完整答案，而不是僅提供鏈接答案。 – josliber

React - 將點擊處理程序附加到動態子項目

回答

相關問題