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

我有我创建了一个组件：为什么我的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在我map呼吁每个playlist。如果我bindactivatePlaylist喜欢：

activatePlaylist.bind(this, playlist.playlist_id)

我也可以使用匿名函数：

那么它将按预期工作。为什么会发生？

来源

2015-12-11 jhamm

你需要传递给onClick参考的功能，当你做这样的activatePlaylist(..)你调用函数，并传递到从activatePlaylist返回onClick值。您可以使用以下三种选项之一：

。使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

。使用箭头功能

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

。或返回功能activatePlaylist

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

来源

2015-12-11 14:48:20

我不记得它在以前版本的'React'中以这种方式工作。我记得是错的还是有'api'改变了？ – jhamm

@jhamm你正在使用ES6类，在这种情况下，你应该手动绑定上下文。 –

@jhamm https://jsfiddle.net/69z2wepo/23823/ –

当React宣布发布基于类的组件时，记录了此行为。

https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

自动绑定

React.createClass有一个内置的神奇功能，所有结合的方法，这为您自动。对于其他类中不习惯此功能的JavaScript开发人员来说，这可能会有些混乱，或者当他们从React移动到其他类时会引起混淆。

因此，我们决定不要将此内置到React的类模型中。如果需要，您仍然可以在构造函数中明确地预先绑定方法。

来源

2015-12-13 22:58:14

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

回答

相关问题