javascript - 为什么在渲染时调用我的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( .. )时，您可以调用function并传递给从onClick返回的activatePlaylist值。您可以使用以下三个选项之一:

1 。使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

2 。使用箭头功能

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

3 。或从activatePlaylist返回函数

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