Question

我正在尝试使用React创建HTML列表。一切都运行良好，但我对我分配给<li> - 标签的点击事件有一些奇怪的行为。这里有两个代码，其中一个有效，但不是另一个。

两个代码之间的区别在于我将onClick事件分配给<li> - 标记。

在不工作的代码中，我告诉onMenuClick我正在谈论的area函数。加载页面时，我将此方法触发三次。

在工作代码中，我没有为onMenuClick函数提供任何参数。虽然我无法知道哪个<li> - 标签触发了该事件。我需要知道它，因为我想对此做出反应。

为什么事件在无效代码中触发了三次？

不工作代码：

var React = require('react');

var Application = React.createClass({
  onMenuClick: function(area) {
    console.log('Application.onMenuClick(' + area + ')');
  },

  render: function () {
    var classWideThis = this;

    var areas = [
      { "id": 0, "name": "Bidirektional" },
      { "id": 1, "name": "Schleifen" },
      { "id": 2, "name": "Events" }
    ];

    return (
      <div>
        <h1>ReactJS Prototyp</h1>
        <div className="menuWindow topAbstand">
          <ul className="menuUl">
            {areas.map(function(area) {
              return <li className="menuLi"
                         key={area.id}
                         onClick={classWideThis.onMenuClick(area.name)}>
                       {area.name}
                     </li>
            })}
          </ul>
        </div>
      </div>
    );
  }
});

module.exports = Application;

良好的工作代码：

var React = require('react');

var Application = React.createClass({
  onMenuClick: function() {
    console.log('Application.onMenuClick()');
  },

  render: function () {
    var classWideThis = this;

    var areas = [
      { "id": 0, "name": "Bidirektional" },
      { "id": 1, "name": "Schleifen" },
      { "id": 2, "name": "Events" }
    ];

    return (
      <div>
        <h1>ReactJS Prototyp</h1>
        <div className="menuWindow topAbstand">
          <ul className="menuUl">
            {areas.map(function(area) {
              return <li className="menuLi"
                         key={area.id}
                         onClick={classWideThis.onMenuClick}>
                       {area.name}
                     </li>
            })}
          </ul>
        </div>
      </div>
    );
  }
});

module.exports = Application;

Answer 1

onClick prop期望函数被传递。您调用onMenuClick函数并将其结果作为第一个示例中的属性传递。您可以将onMenuClick函数更改为返回处理单击事件的函数，并使用闭包来记住传递的参数：

onMenuClick: function(area) {
    return function() {
        console.log('Application.onMenuClick(' + area + ')');
    };
},

然后将其传递给onClick：

onClick={classWideThis.onMenuClick(area.name)}

更高级（但更好看）将bind原始onMenuClick函数发送到正确的上下文并为其添加参数：

onClick={classWideThis.onMenuClick.bind(classWideThis, aera.name)}

JavaScript React事件被奇怪地触发了

1 个答案: