Dlaczego onClick uruchamia się przy renderowaniu komponentu, a nie po kliknięciu?

Question

Mam ten przycisk console.log jako test i jest on wyzwalany za każdym razem, gdy odświeżam stronę, a nie po kliknięciu przycisku nawigacji. Daj mi znać, jeśli możesz zobaczyć problem z tym kodem, jeśli będziesz potrzebować więcej.

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

To dlatego, że jesteś rzeczywiście wywołanie funkcji console.log w obsługi onClick, zamiast po prostu wskazując na jego odniesienie. JSX kompiluje się do zwykłego JS, więc wszystko między nawiasami {} zostanie ocenione. Musisz tylko wskazać odwołanie do funkcji w twoim onClick, a nie wywoływać go.

to nieco skomplikowane z faktu, że podczas korzystania z klas ES6 trzeba wiązać z aktualnym this, nie jest Automatyczne powiązanie dla lubisz ze starą składnią styl React.createClass, ale oto krótki przykład,

class MyComponent { 

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

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