React onClick event

Question

Brakuje mi czegoś. Oto bardzo prosty świat cześć, celem jest tylko uruchomienie zdarzenia alertowego onClick. Zdarzenie jest uruchamiane po załadowaniu strony, ale nie po kliknięciu przycisku. Doceniam pomoc. Oto jsFiddle aby łatwiej zobaczyć: jsFiddle

var Hello = React.createClass({ 
render: function() { 
    return <button onClick={alert("Hello World!")}> 
       Click Me 
      </button>; 
} 
React.render(<Hello />, document.getElementById('container')); 

Answer 1

myślę, że będzie o to źle, bo jest po prostu ReactJS JavaScript Nie sądzę swój sposób wypalania zdarzenie to będzie działać. Twój onClick powinien uruchomić funkcję dołączoną do twojego elementu React, tak jak to.

var Hello = React.createClass({ 
    myClick: function() { 
     alert("Hello World!"); 
    }, 
    render: function() { 
     return <button onClick={this.myClick}> 
        Click Me 
       </button>; 
    } 
}); 

React.render(<Hello />, document.getElementById('container')); 

Answer 2

Teraz rozumiem, dlaczego wcześniej miałem problem. Problem pojawił się, gdy próbowałem przekazać argument do funkcji:

var Hello = React.createClass({ 
    myClick: function (text) { 
     alert(text); 
    }, 
    render: function() { 
     return <button onClick={this.myClick("Hello world")}> 
        Click Me 
       </button>; 
    } 
}); 

Zachowuje się tak samo jak oryginalny kod.

Answer 3

Jeśli funkcja ma być prowadzony parametry, to musi być związana z funkcją następująco:

var Hello = React.createClass({ 
    handleClick: function (text) { 
     alert(text) 
    }, 

    render: function() { 
     return <button onClick = { 
      this.handleClick.bind(null, "Hello World") 
     } > Click Me < /button>; 
    } 
}); 

React.render(<Hello/> , document.getElementById('container')); 

to sens teraz. Jeszcze raz dziękuję @ Chris-Hawkes za skierowanie mnie we właściwym kierunku.

Answer 4

Uwaga: jest to kolejny sposób, aby to zrobić, jeśli chcesz coś szybko/inline:

<button onClick={()=>{ alert('alert'); }}>alert</button>