反应 onClick 事件

Question

我遗漏了一些东西。这是一个非常简单的 hello world，目标是在单击时触发警报事件。该事件在页面加载时触发，但在我单击按钮时不会触发。感谢您的帮助。这是一个 jsFiddle 以使其更易于查看：jsFiddle

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

Answer 1

我认为你的做法是错误的，因为 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'));

Answer 2

现在我明白了为什么我以前遇到过这个问题。当我试图将参数传递给函数时出现问题：

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

这与原始代码具有相同的行为。

Answer 3

如果函数运行有参数，则必须按如下方式绑定到函数：

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 为我指明了正确的方向。

Answer 4

注意：如果你想要一些东西，这是另一种方法quick/inline:

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

反应 onClick 事件

React onClick event

reactjs

react-jsx