React onClick未触发

Question

以下代码不起作用。onClick事件从未触发过，但我在browserify或控制台中看不到错误。

var React = require('react');

var Button = React.createClass({
  render: function() {
    return (
      <div className="Button">
        <span className="left" onclick={function() {alert("left")}}>Left</span>
        <span className="right" onclick={function() {alert("right")}}>Right</span>
        <span className="middle" onclick={function() {alert("middle")}}>Middle</span>
      </div>
    );
  }
});

module.exports=Button;

我使用alert只是为了测试小的CSS。为什么onclick没有触发？

Answer 1

您的示例中有一个拼写错误。使用'onclick‘而不是'onClick’。

<span className="left" onClick={function() {alert("left")}}>Left</span>

有关工作示例，请参阅jsfiddle - https://jsfiddle.net/Ltdc8qpr/1/

Answer 2

这里用箭头函数语法，用onClick处理程序触发事件。

<span className="left" onClick={() => {alert("left")}}>Left</span>

Answer 3

我也面临着同样的问题。问题是<span>标记在左上角，只有当我单击左上角时，警报才会触发。而不是其他任何空间。

我把<span>改成了<div>，它起作用了。