React点击事件无法触发

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没有触发？

- Megh Parikh

---

你尝试使用 onClick 而不是 onclick 了吗？ - Jerome WAGNER

请创建 Fiddle。 - kag

alert.bind(this,"left")也不起作用。 - Megh Parikh

尝试使用alert.bind(window, 'left');。alert是window对象的一个函数。在另一个作用域中调用它可能会产生意想不到的效果，因为它是一个本地方法。 - Jerome WAGNER

一些alert.bind在browserify/reactify中没有工作，但在JSFiddle中有效，所以我回到了原始问题。 - Megh Parikh

Answer 1

您的示例中有一个拼写错误。请使用'onClick'代替'onclick'。

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

请见jsfiddle中的工作示例 - https://jsfiddle.net/Ltdc8qpr/1/

- Jerome WAGNER

Answer 2

使用箭头函数语法，在onClick处理程序中触发事件。

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

- Anupam Maurya

---

不建议使用 Lint 规则 jsx-no-lambda。 - gdbdable

@devi，感谢你的想法和规则。根据需要定义自己的linter，并不意味着lambda在调用javascript事件处理程序时不允许。即使在将props从子组件传递到父组件的ONclick处理程序时，我们仍然需要按如下方式传递：子级调用 onClick={() => this.props.callingFunction(passingdata)}在父级上 <SomeClass callingFunction={this.callingFunction}>callingFunction = (passedData) => { // dealing } 非常简单 如果有疑问请告诉我。这很简单，没有什么大不了的 :) - Anupam Maurya

@maurya，这是公开的而不是我的规则 如果您需要将数据传递给处理程序，则在绑定到高阶函数之前进行绑定，如下所示： const bindData = () => (data) => this.props.callingFunction(data) 然后在JSX中设置而不使用lambda函数 - gdbdable

Answer 3

我曾经遇到过同样的问题。问题在于 <span> 标签位于左上角，只有当我点击左上角时，警报才会触发。而其他任何空间都不行。

我将 <span> 改为 <div>，问题得以解决。

- Asma Rahim Ali Jafri