JavaScript React事件被奇怪地激发

我正在尝试使用React创建一个HTML列表。这一切都很好，但我在分配给

-标记的单击事件中遇到了一些奇怪的行为。这里有两个代码，一个有效，另一个无效

两种代码之间的区别在于我将onClick事件分配给

-标记的方式

在不工作的代码中，我告诉

onMenuClick

函数我所说的

区域。加载页面时，我会触发此方法三次

在工作代码中，我没有为
onMenuClick
函数提供任何参数。在这里，虽然我不知道是哪个
-tag触发了事件。但我需要知道，因为我想对此做出反应

为什么事件在不工作代码中触发三次

非工作代码：

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;

var React=require（'React'）；
var Application=React.createClass({
onMenuClick：函数（区域）{
console.log（'Application.onMenuClick（'+area+'））；
},
渲染：函数（）{
var classWideThis=this；
可变区域=[
{“id”：0，“name”：“bidirectional”}，
{“id”：1，“name”：“Schleifen”}，
{“id”：2，“name”：“Events”}
];
返回(
反应JS原型

{areas.map（函数（区域））{
return

{area.name}

})}

);
}
});
module.exports=应用程序；

良好的工作代码：

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;

var React=require（'React'）；
var Application=React.createClass({
onMenuClick:function（）{
console.log（'Application.onMenuClick（）'）；
},
渲染：函数（）{
var classWideThis=this；
可变区域=[
{“id”：0，“name”：“bidirectional”}，
{“id”：1，“name”：“Schleifen”}，
{“id”：2，“name”：“Events”}
];
返回(
反应JS原型

{areas.map（函数（区域））{
return

{area.name}

})}

);
}
});
module.exports=应用程序；
onClick
prop expect函数被传递。调用
onMenuClick
函数，并将其结果作为第一个示例中的属性传递。您可以将
onMenuClick
函数更改为返回处理单击事件的函数，并使用闭包来记住传递的参数：

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

然后将其传递给
onClick
：

onClick={classWideThis.onMenuClick（area.name）}

更高级（但外观更好）的方法是将原始
onMenuClick
函数添加到正确的上下文中，并在其前面添加参数：

onClick={classWideThis.onMenuClick.bind（classWideThis，aera.name）}
当我这样做时，函数会正确返回，但当我在浏览器的Web控制台中单击获取
Application.onMenuClick（[object object]）
时。似乎
区域。名称
未正确传输到
函数（区域）
的
区域
参数中。你知道为什么吗？试着调试一下。将对象打印到控制台-
console.log（区域）
。你能看到什么？好的，在编辑之后（将
区域
参数从内部函数放到外部函数），使用非绑定onClick一切都正常。绑定onClick示例不起作用。
onMenuClick.bind（…）
的优点是什么？@Socrates将bind onClick与原始的
onMenuClick
实现一起使用，它应该可以工作。它将从菜单单击中创建新函数，并在
区域前添加
参数。为其命名
参数，使其类似于创建内部-外部函数。