Perché l'attivazione di onClick sul rendering del componente anziché quando viene fatto clic?

Question

Ho questo pulsante console.log come test e viene attivato quando aggiorno la pagina anziché quando faccio clic su un pulsante di navigazione. Fammi sapere se riesci a vedere il problema con questo codice se ti servirà di più.

import React from 'react'; 
import SideNav from "react-sidenav"; 
var TeamActions = require('../actions/TeamActions'); 

export default class Nav extends React.Component { 
    pushName(name) { 
    TeamActions.setTeamName(name); 
    } 

    render() { 
    return(
     <SideNav.Menu 
     path="#" 
     itemHeight="32px" 
     styles={{margin: "0"}} 
     > 
     <SideNav.MenuItem 
      itemKey="truck" 
     > 
     //this is where I'm using onClick 
      <SideNav.ILeftItem 
      className="fa fa-truck" 
      onClick={console.log("hello")} 
      > 
       Boston Celtics 
      </SideNav.ILeftItem> 
     </SideNav.MenuItem> 

Answer 1

Questo perché in realtà stai chiamando la funzione console.log nel vostro gestore onclick, piuttosto che punta al suo riferimento. JSX si compila in plain JS, quindi verrà valutato qualsiasi valore tra parentesi {}. Devi solo indicare il riferimento alla funzione nel tuo onClick, non chiamarlo.

E 'un po' complicato con il fatto che quando si utilizzano le classi ES6 è necessario associare alla corrente this, non è autobound per voi come con il vecchio stile React.createClass sintassi, ma ecco un esempio veloce,

class MyComponent { 

    onLinkClicked() { 
    console.log('Clicked!') 
    } 

    render() { 
    return (
     <a onClick={this.onLinkClicked.bind(this)}>Click me</a> 
    ); 
    } 
}