Javascript 反应元件'；当绑定到map（）函数内时，s方法显示出奇怪的行为

我刚开始学习ReactJS，在使用Array.prototype.map（）方法渲染多个元素时遇到了一个非常令人费解（而且很烦人）的问题。我在网上搜索了解决方案，看了几本书都没有成功。以下是我试图实现的代码：

var ExampleComponent = React.createClass({
  handleClick: function(event) {
    event.preventDefault();
    console.log("Click is working");
  },

  getInitialState: function() {
    return {
      exampleArray: ["one", "two", "three"]
    };
  },

  render: function() {
    return (
      <div>
        {this.state.exampleArray.map(function(item, index) {
          return (
            <button className={item} key={index} onClick={this.handleClick}>{item}</button>
          );
        })}
      </div>
    );   
  }
});

var ExampleComponent=React.createClass({
handleClick:函数（事件）{
event.preventDefault（）；
console.log（“单击正在工作”）；
},
getInitialState:函数（）{
返回{
示例数组：[“一”、“二”、“三”]
};
},
render:function（）{
返回(
{this.state.exampleArray.map（函数（项，索引）{
返回(
{item}
);
})}
);   
}
});

按钮渲染得很好。我希望在单击其中一个时，指定的字符串将记录在控制台中。相反，单击按钮会导致页面重新加载。。。我觉得在React是如何工作的这一点上，我显然遗漏了一些东西

以前有人遇到过这个问题吗？罪魁祸首是什么？有没有更好的方法来实现相同的模式

任何关于这个问题的意见都将不胜感激

您需要使用父上下文调用

map（）

：

//使用上下文调用映射。
{this.state.exampleArray.map（函数（项，索引）{
返回(
{item}
);
}，这个）}
//通过箭头函数调用具有隐式上下文的映射。
{this.state.exampleArray.map（（项，索引）=>{
返回(
{item}
);
})}

---

另请参见。

非常感谢您的输入。我尝试了你的建议，不幸的是，点击按钮仍然会导致页面重新加载。另外，当尝试显式绑定处理程序（第二个示例）时，React会记录以下内容：

您正在将组件方法绑定到组件。React以高性能的方式自动为您执行此操作，因此您可以安全地删除此调用。

@augustinas感谢您的反馈，我更正了有关在此场景中显式绑定事件处理程序的错误。我不确定发生了什么——这里肯定发生了其他事情，因为

没有默认操作。您是否有其他正在运行的代码可以将事件处理程序附加到

单击？我建议用jsfiddle之类的语言创建一个可复制的示例。再次感谢@JMM！你的回答完全正确，现在它很有魅力。我在调试过程中的某个时候注释掉了

event.preventDefault（）

，这就是为什么我在检查您的解决方案时遇到问题的原因……啊，好的，谢谢。我猜如果没有

@type

，

默认为表单中的提交按钮（我猜这就是您拥有的）。另外，在您对错误发表评论并编辑了文章后，我意识到我链接到的React文档表示要绑定事件处理程序，并且没有使用ES6类语法，因此他们一定已经更改了这一点，而没有更新文档。@augustinas您使用的React版本是什么？