爲什麼我的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

回答

相關問題