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

伊芙妮2020-03-12

我有一个已创建的组件：

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

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

SamTony2020/03/12 20:17:17

您传递方法的方式this.activatePlaylist(playlist.playlist_id)将立即调用该方法。您应该将方法的引用传递给onClick事件。按照下面提到的一种实现来解决您的问题。

1。

onClick={this.activatePlaylist.bind(this,playlist.playlist_id)}

在这里，bind属性用于this.activatePlaylist通过传递this上下文和参数来创建方法的引用playlist.playlist_id

2。

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

这会将一个函数附加到onClick事件，该事件仅在用户单击操作时触发。执行此代码时，this.activatePlaylist将调用该方法。

古一梅2020/03/12 20:17:17

您需要传递对函数的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 
  }
}

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer