在array.map内部分配时,Javascript onClick不会触发

我创建了一个用React.js动态加载其内容的网页.我正在从REST api调用中检索一个对象数组,然后将它们提供给一个表.我遇到的问题是array.map中的onClick赋值不会触发指定的函数.

我相信这是一个[ 这个 ]背景问题,但我不知道如何解决它.在[ 这个 ]在array.map是不一样的[ 此 ]所证明通过的console.log的array.map之外.

我创建了两个独立的html文件进行演示.第一个包含一个静态创建的对象,它正确调用onClick函数:

https://jsfiddle.net/m1vugyd9/

第二次尝试从一组对象动态加载,但不起作用:

https://jsfiddle.net/avmbdxte/

我不知道这些链接保持活动多长时间,所以如果它们不起作用,我还包括下面的实际html.差异在评论中有所突出.

静电 - 工程:

动态 - 不起作用:

工作示例(感谢pvg!):

https://jsfiddle.net/qLp9uuq3/

另一个工作示例(感谢Matthew Herbst!):

https://jsfiddle.net/09n6xss2/

在代码的动态部分:默认情况下Map()不会this从组件中获取值,因此您需要绑定它:

var fMaps = maps.map(function (map) {
  return (
    
  );
}.bind(this));

如果你使用ES6箭头函数,this将是词法继承,你不会有这个问题:

var fMaps = maps.map((map) => {
  return (
    
  );
});

考虑到你可能已经在使用Babel或其他工具进行JSX转换,可能也值得研究ES6转换.开始学习未来的好方法!