Neden ClickClick, tıklandığında yerine bileşen oluşturuluyor?

Question

Bu düğme konsol.log'u bir test olarak kullanıyorum ve bir nav düğmesini tıkladığımda sayfayı yenilediğimde tetikleniyor. Daha fazla ihtiyacınız varsa, bu kodla ilgili sorunu görebiliyorsanız bana bildirin. gerçekte onClick işleyicisi içinde console.log işlevini çağırarak yerine sadece kendi referans işaret çünkü var

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

. JSX, düz JS'ye derler, bu yüzden {} parantezleri arasında bir değerlendirme değerlendirilecektir. OnClick'teki işlev referansını göstermeniz yeterlidir.

Biraz ES6 sınıfları kullanırken geçerli this bağlamak gerekiyor gerçeği ile karışık, bu eski tarz React.createClass sözdizimi ile ister için autobound, ama burada size kısa bir örnek değil,

class MyComponent { 

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

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