反应 onClick 事件答案

【问题标题】：React onClick event反应 onClick 事件
【发布时间】：2015-12-05 19:33:02
【问题描述】：

我错过了一些东西。这是一个非常简单的 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'));

【问题讨论】：

标签： reactjs react-jsx

【解决方案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'));

【讨论】：

谢谢@Chris-Hawkes，这行得通。我以前尝试过类似的东西，但这让我走错了路。再次感谢
这个 React 代码似乎在 2018 年的 Codepen 中不起作用。我将 React.render 更改为 ReactDOM.render，但页面上仍然没有显示任何按钮。

【解决方案2】：

注意：如果您想要快速/内联，这是另一种方法：

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

【讨论】：

每当我加载页面时，OnClick 都会不断发出警报。而不是做 onClick={thisFunc()} 只是做 onClick={() => thisFunc}

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

【讨论】：

【解决方案4】：

现在我明白了我之前遇到问题的原因。当我试图将参数传递给函数时，问题就来了：

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

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

【讨论】：