如何在React类上定义事件处理程序？

Question

我刚开始接触ReactJS，我试图触发按钮上的onCLick事件：

/** 
* @jsx React.DOM 
*/ 
var ExampleApplication = React.createClass({ 
    render: function() { 

     var message ='Joko'; 

     return <div><p>{message}</p><button onClick=function() {console.log("hi")}>hier</button></div>; 
    } 
}); 

React.renderComponent(
    <ExampleApplication />, 
    document.getElementById('container') 
); 

我怎样才能显示console.log消息，并触发onClick事件？我得到的错误是：

Uncaught Error: Parse Error: Line 9: XJS value should be either an expression or a quoted XJS text 
    at http://localhost:63343/react-0.11.2/examples/basic-jsx-external/example.js:9:53 

Answer 1

你需要换行的onClick这样：

return <div><p>{message}</p><button onClick={function() {console.log("hi")}}>hier</button></div>; 

因为它的立场，onClick=function(){}，并不意味着功能为JSX表达。

小提琴： https://jsfiddle.net/gwm6dd4n/

Answer 2

阵营的JSX语法只是语法糖，其被转换成普通JS。任何时候你想要在其中注入普通的JS，你都需要使用它。代码中的事件处理程序定义缺少周围的{}。我可以推荐更简洁的lambda表达式来代替...使用

onclick={()=> console.log("hi")}