为什么我的onClick被调用渲染？ - React.js

我有一个我创建的组件:

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

  render() {
    var playlistDOM = this.renderPlaylists(this.props.playlists);
    return (
      

        {playlistDOM}
      
    )
  }

  activatePlaylist(playlistId) {
    debugger;
  }

  renderPlaylists(playlists) {
    return playlists.map(playlist => {
      return 
{playlist.playlist_name}
    });
  }
}

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

export default connect(mapStateToProps)(Create);

当我render这个页面时,我的activatePlaylist每一个都被称为.如果我喜欢:playlistmapbind activatePlaylist

activatePlaylist.bind(this, playlist.playlist_id)

我也可以使用匿名函数:

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

然后它按预期工作.为什么会这样？

你需要传递给函数的onClick 引用,当你这样做时,activatePlaylist( .. )你调用函数并传递给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 
  }
}