Reactjs 为什么我的 onClick 在render渲染时被调用

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

activatePlaylist.bind(this, playlist.playlist_id)

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

activatePlaylist.bind(this, playlist.playlist_id)

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

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

Reactjs相关问答推荐

当props 更改时，React Native功能组件不会更新

在Reaction中单击时，按钮未按预期工作

XChaCha20-Poly1305的解密函数

使用下一步中的路由/导航不会立即加载路由

React Router：在没有手动页面刷新的情况下，路由不会更新内容

如何使用TouchStart/TouchEnd在Table ReactJS中交换位置？

透明MOV文件未出现在我的React网页中

使用experial_useFormState将参数传递给服务器操作

StrictMode+SetInterval=双重渲染(即使使用useEffect清理)

React redux 工具包 useGetFilterProductsQuery 和 useGetFilterProductsByCategoriesQuery 未定义为函数

我无法通过 useContext 显示值

Yup.number().integer() 不将 1.0 视为小数，如何解决这个问题？

React中useAuthenticator的authState在成功登录后仍保持未认证状态 - 需要强制刷新

无法访问 usefocusEffect 中 const 的更新状态

如何使用样式化函数为 TextField 的输入组件设置样式

React v6 中的公共和私有路由

顶点图表甜甜圈项目边框半径

使用 axios 响应路由 Dom 操作

单击当前子div时如何更改p标签的图像和样式？react

为什么 state redux-toolkit 是代理？