React.js onClick不工作点击从json表映射的跨度图标

Question

我有从json表映射的图标：

<ul className="major-icons">{ icons.map(function(i){
                            return <li key={i.id}><span className={i.class} id={i.id} data-id={i.data} onClick={this.onClick} onMouseOver={this.onHover}></span></li>

                                }) }

                            </ul>

var icons = [

    { data: '0', id: 'p0', class: 'icon style1 major fa-code'},
    { data: '1', id: 'p1', class: 'icon style2 major fa-bolt'},
    { data: '2', id: 'p2', class: 'icon style3 major fa-camera-retro'},
    { data: '3', id: 'p3', class: 'icon style4 major fa-cog'},
    { data: '4', id: 'sochi', class: 'icon style5 major fa-desktop'},
    { data: '5', id: 'decision_trees', class: 'icon style6 major fa-calendar'},

];

我有一个事件处理程序：

getInitialState: function() {
    return { project_id: 0};
},

onClick: function(event) {
    this.setState({ project_id: event.currentTarget.dataset.id });
    console.log("hello");
},

不幸的是，即使单击这些跨度图标，也不会发生任何事情（甚至不是console.log）。我该怎么办？

Answer 1

this函数中的map范围存在问题。修复代码的最快方法是保留this的范围。要确保this引用您的Component，您可以1）将this作为第二个参数传递给map，2）使用箭头函数;或3）使用bind方法。这是一个演示：http://codepen.io/PiotrBerebecki/pen/jraLWZ

我会审核这个答案：https://stackoverflow.com/a/38908620/4186037并考虑重构代码，以便我们不会为上的数组中的每个项创建点击处理程序的副本每个重新渲染。

1. 将this传递给map方法

         <ul className="major-icons">{ icons.map(function(i) {
             return (
               <li key={i.id}>
                     <span className={i.class}
                           id={i.id}
                           data-id={i.data} 
                           onClick={this.onClick} 
                           onMouseOver={this.onHover}>
                       Some text
                     </span>
               </li>
             );
           }, this) }
   -----------^^^^
         </ul>
   

2. 箭头功能

         <ul className="major-icons">{ icons.map((i) => {
   --------------------------------------------------^^
           return (
               <li key={i.id}>
                     <span className={i.class}
                           id={i.id}
                           data-id={i.data} 
                           onClick={this.onClick} 
                           onMouseOver={this.onHover}>
                     </span>
               </li>
             );
           }) }
         </ul>
   

3. 绑定方法

         <ul className="major-icons">{ icons.map(function(i) {
           return (
               <li key={i.id}>
                     <span className={i.class}
                           id={i.id}
                           data-id={i.data} 
                           onClick={this.onClick} 
                           onMouseOver={this.onHover}>
                     </span>
               </li>
             );
           }.bind(this)) }
   ---------^^^^^^^^^^
         </ul>