[解決済み] レンダリング時にonClickが呼ばれるのはなぜですか？- React.js

質問

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

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);

私が render このページを activatePlaylist が呼び出されるのは、それぞれの playlist の中で map . もし私が bind activatePlaylist のように

activatePlaylist.bind(this, playlist.playlist_id)

無名関数を使うこともできますね。

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

とすれば、期待通りに動作します。 なぜこのようなことが起こるのでしょうか？

どのように解決するのですか？

へのパスが必要です。 onClick 参照 を機能させるために、以下のようにすると activatePlaylist( .. ) を呼び出すと、その関数に onClick から返された値を activatePlaylist . これら3つのオプションのいずれかを使用することができます。

1 を使って .bind

activatePlaylist.bind(this, playlist.playlist_id)

2 矢印機能を使用しています。

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

3 からの戻り関数 activatePlaylist

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