Question

我正在重复一个OBJECT来渲染UI。每行都有一个ItemName和一个复选框。单击复选框我应该获得该行的ID。当我运行页面时，我收到此错误消息msg =＆gt;无法读取属性＆＃39; addToCompare＆＃39;未定义的

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引用到列表

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

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

Answer 2

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

Answer 3

使用<div>方法将列表映射到map标记时，该映射函数中的the value of this为undefined，而不是组件，因为它是{{3} }}

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

var planList = ... ,
    that = this;

现在，您可以使用that代替this

来引用该组件

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

Answer 4

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

＆＃13;

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')
)

＆＃13;

<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" />

＆＃13;

函数不会被调用onChange of Checkbox

4 个答案: