我错过了一些东西。这是一个非常简单的 hello world，目标是触发 onClick 警报事件。该事件会在页面加载时触发，但在我单击按钮时不会触发。我很感激你的帮助。这是一个 jsFiddle 以便于查看：jsFiddle
var Hello = React.createClass({
render: function() {
return <button onClick={alert("Hello World!")}>
Click Me
</button>;
}
React.render(<Hello />, document.getElementById('container'));
我认为您的做法是错误的，因为 ReactJS 只是 JavaScript，我认为您触发此事件的方式行不通。你的 onClick 应该像这样触发一个附加到你的 React 元素的函数。
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'));
注意：如果您想要快速/内联的东西，这是另一种方法：
<button onClick={()=>{ alert('alert'); }}>alert</button>
如果要运行的函数有参数，则必须按如下方式绑定到该函数：
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'));
这现在说得通了。再次感谢@Chris-Hawkes 为我指明了正确的方向。
现在我明白为什么我之前遇到了这个问题。当我尝试将参数传递给函数时出现了问题：
var Hello = React.createClass({
myClick: function (text) {
alert(text);
},
render: function() {
return <button onClick={this.myClick("Hello world")}>
Click Me
</button>;
}
});
这与原始代码具有相同的行为。