javascript - 未调用 Checkbox 的 onChange 函数

Question

我正在重复一个对象来呈现 UI。每行都有一个 ItemName 和一个复选框。单击复选框我应该得到该行的 ID。当我运行该页面时，我收到此错误消息 => 无法读取未定义的属性“addToCompare”

import React from 'react';

    export default class List extends React.Component {

        constructor(props) {
            super(props);

        }
        addToCompare(event){
              console.log('get id of row');
            }
        render() {
          var planList = [
                          {id: 1, "itemname": "Sunshine},
                          {id: 2, "itemname": "Global"},
                          {id: 3, "itemname": "Lifetime"}
                          ];
            return (
                    <div id="layout-content" className="layout-content-wrapper">
                      {
                        planList.map(function(item, i) {
                         return (
                           <div className="row" key={i}>
                              <h1>
                               <input type="checkbox" onChange={this.addToCompare.bind(this)} />{item.name}
                              </h1>
                           </div>
                           )
                         })
                       }
                     )
    }    

Answer 1

使用es6语法，map函数将this引用到List as

planList.map((item, i) =>{
   return (
         <div className="row" key={i}>
          <h1>
           <input type="checkbox" onChange={this.addToCompare.bind(this)} />{item.name}
          </h1>
          </div>
         )
      })

或将 this 存储到其他变量并使用它来获取 addToCompare 属性，如@Marco 所述