レンダリング時にonClickが呼び出されるのはなぜですか？ - React.js

Question

私は、私が作成したコンポーネントがあります。

class Create extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    var playlistDOM = this.renderPlaylists(this.props.playlists); 
    return (
     <div> 
     {playlistDOM} 
     </div> 
    ) 
    } 

    activatePlaylist(playlistId) { 
    debugger; 
    } 

    renderPlaylists(playlists) { 
    return playlists.map(playlist => { 
     return <div key={playlist.playlist_id} onClick={this.activatePlaylist(playlist.playlist_id)}>{playlist.playlist_name}</div> 
    }); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    playlists: state.playlists 
    } 
} 

export default connect(mapStateToProps)(Create); 

I renderこのページ、activatePlaylistが私のmapに各playlistのために呼ばれています。好きなら私bindactivatePlaylist：

activatePlaylist.bind(this, playlist.playlist_id) 

は、私はまた、匿名関数を使用することができます。

予想通り、それは動作します。なぜこれが起こるのですか？

Answer 1

あなたは関数へonClick参照、あなたはこのactivatePlaylist(..)好きときに関数を呼び出すとactivatePlaylistから返さonClick値に渡すに渡す必要があります。次の3つのオプションのいずれかを使用できます。

.bind

activatePlaylist.bind(this, playlist.playlist_id) 

を使用。矢印機能

onClick={() => this.activatePlaylist(playlist.playlist_id) } 

を使用。またはクラスベースのコンポーネントのリリースを発表しまし反応すると、この動作は、文書化されたactivatePlaylist

activatePlaylist(playlistId) { 
    return function() { 
    // you code 
    } 
} 

Answer 2

から機能を返します。

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

自動バインド

React.createClassは内蔵しており、自動的にあなたのためにこれまでのすべてのメソッドをバインド魔法機能。これは、他のクラスのこの機能には慣れていないJavaScript開発者にとっては少し戸惑うかもしれませんし、Reactから他のクラスに移行すると混乱するかもしれません。

したがって、Reactのクラスモデルにこの組み込み関数を組み込むことはしませんでした。必要に応じて、コンストラクタのメソッドを明示的に事前バインドすることもできます。