Почему onClick запускается при рендеринге компонента, а не при нажатии?

Question

У меня есть эта кнопка console.log как тест, и она запускается всякий раз, когда я обновляю страницу, а не когда я нажимаю кнопку nav. Дайте мне знать, если вы видите проблему с этим кодом, если вам нужно больше.

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

Это потому, что вы на самом деле вызов функции console.log в обработчике OnClick, а не только указывая на его ссылки. JSX компилируется в обычный JS, поэтому будет проведено сравнение между скобками {}. Вам нужно просто указать на ссылку функции в вашем onClick, а не называть ее.

Это немного сложно с тем, что при использовании классов ES6 вам нужно привязать к текущему this, не autobound для вас, как со старым синтаксисом стиль React.createClass, но вот быстрый пример,

class MyComponent { 

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

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