函数未调用onChange of Checkbox

function is not called onChange of Checkbox

本文关键字：of Checkbox onChange 调用函数更新时间：2023-09-26

我正在重复一个OBJECT来渲染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>
                           )
                         })
                       }
                     )
    }

使用es6语法，对于map函数，将this引用为

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 所述

如果使用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" />

您将错误的上下文传递给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" />

使用map方法将列表映射到<div>标记时，该映射函数中的this值是undefined，而不是组件，因为它是作为匿名函数调用的。

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

var planList = ... ,
    that = this;

现在您可以使用that而不是this 来引用组件

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