React 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'));

- Ivan Histand

Answer 1

我认为你做错了，因为ReactJS只是JavaScript，我不认为你的触发事件的方式会起作用。你的onClick应该触发附加到你的React元素的函数，像这样:

我认为您正在错误地进行操作，因为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'));

- Chris Hawkes

---

谢谢@Chris-Hawkes，那个方法可行。我之前尝试过类似的东西，但是走了错误的方向。再次感谢。 - Ivan Histand

这段React代码似乎在2018年的Codepen上无法运行。我将React.render更改为ReactDOM.render，但页面仍然没有按钮显示出来。 - Chris Nielsen

Answer 2

注意：如果你想要一种快速/内联的方法，这是另外一种实现方式：

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

- armyofda12mnkeys

---

当我加载页面时，OnClick会持续发出警报。不要使用onClick={thisFunc()}，而是使用onClick={() => thisFunc}。 - Vael Victus

这在ReactJS中也适用，谢谢+1。 - Muhammad Ali

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再次指导我朝正确的方向发展。

- Ivan Histand

Answer 4

现在我明白了之前为什么会出问题。问题出在我试图向函数传递参数时：

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

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

- Ivan Histand