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

JavaScript

伊芙妮

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

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

第1304篇《为什么在渲染时调用我的onClick？-React.js》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
SamTony 2020.03.12

您传递方法的方式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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android