未调用 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

当您使用 map 方法将列表映射到 <div> 标签时，the value of this inside that mapping function is undefined, not the component, as it is invoked as an anonymous function.

在您的渲染方法中，声明一个 that 变量，以保存对您的组件的引用。

var planList = ... ,
    that = this;

现在您可以使用 that 而不是 this

来引用组件

<input type="checkbox" onChange={that.addToCompare.bind(that)} />{item.name}

Answer 2

使用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

所述

Answer 3

您将错误的上下文传递给 onChange 方法

class Example 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"
    }, ];

    var _this = this

    var rows = planList.map(function(item, i) {
      return (
         <div className="row" key={i}>
            <h1>
             <input type="checkbox" onChange={_this.addToCompare.bind(_this)} />{item.itemname}
            </h1>
         </div>
         )
      }
    )

    return (
      <div id="layout-content" className="layout-content-wrapper">
        {rows}
      </div>
   )
 }
}

ReactDOM.render(
  <Example />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

Answer 4

并且如果您使用 Class 声明，则可以使用所有 ES6 功能。

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.addToCompare = this.addToCompare.bind(this)
  }

  addToCompare(event) {
    console.log('get id of row')
  }

  render() {
    const planList = [
      { id: 1, itemname: 'Sunshine' },
      { id: 2, itemname: 'Global' },
      { id: 3, itemname: 'Lifetime' },
    ]

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

    return (
      <div id="layout-content" className="layout-content-wrapper">
        {rows}
      </div>
   )
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('app')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

未调用 Checkbox 的 onChange 函数

function is not called onChange of Checkbox

javascript

reactjs

react-router