Dlaczego mój program onClick jest wywoływany przy renderowaniu? - React.js

Question

Mam składnik, który mam Utworzono:

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

Kiedy render tej stronie, activatePlaylist jest wywoływana dla każdego playlist w moim map. Gdybym bindactivatePlaylist lubię:

activatePlaylist.bind(this, playlist.playlist_id) 

mogę również użyć anonimową funkcję:

to działa zgodnie z oczekiwaniami. Dlaczego to się dzieje?

Answer 1

Musisz przejść do onClickodniesienia funkcjonować, jeśli nie podoba Ci activatePlaylist(..) wywołanie funkcji i przekazać do onClick wartości, która powróciła z activatePlaylist. Możesz użyć jednej z tych trzech opcji:

. stosując .bind

activatePlaylist.bind(this, playlist.playlist_id) 

. przy użyciu funkcji strzałki

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

. lub funkcję powrotu z activatePlaylist

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

Answer 2

To zachowanie zostało udokumentowane kiedy React wyda komponentów opartych klasowych.

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

Autobinding

React.createClass ma wbudowaną funkcję, która związana magiczną wszystkie metody do tego automatycznie. Może to być trochę mylące dla programistów JavaScript, którzy nie są przyzwyczajeni do tej funkcji w innych klasach lub może być mylące, gdy przechodzą z React do innych klas.

Dlatego zdecydowaliśmy, że nie będziemy mieli tego wbudowanego w model klasy React. W razie potrzeby możesz jeszcze jawnie wstępnie powiązać metody w swoim konstruktorze.