将 onClick 处理程序附加到填充的列表项 reactjs答案

【问题标题】：attach onClick handler to populated list item reactjs将 onClick 处理程序附加到填充的列表项 reactjs
【发布时间】：2016-10-25 05:14:26
【问题描述】：

我有一个功能，我想在单击按钮时触发该功能，此按钮包含在列表项中，该列表项根据从父组件传递的数组中的值填充，但它不起作用并返回错误说这个函数是未定义的，我怎样才能使它工作？

import React from 'react';

export default class Card extends React.Component {

constructor(){
  super()
  this.state = {
    index: null
  };
}

handleClick(x){
   this.setState({
    index: x
   })

}

 render(){
  /**
   * Populates list items according to data passed
   * on to resultsArray.
   */
    var items = this.props.resultsArray;
    var itemslist = items.map(function(item, index){
          return(
              <li key={ index } class="card" >
                <div class="card-header">
                    <span class="hour-price"><span>{ item.hourPrice } &euro; /hour</span></span>
                    <img src={ item.image } class="card-img" />
                    <a href="javascript:" onClick={this.handleClick.bind(this, {index})} class="book-button">Book</a>
                  </div>
                <div>
                  <div class="card-info">
                    <p class="workplace-name">{ item.name }</p>
                    <span class="score">{ item.score } &#9733;</span>
                    <p class="location">{ item.location }</p>
                  </div>
                  <div class="card-footer">
                    <p class="price">{ item.price } &euro; / Day</p>
                  </div>
                </div>
              </li>
          );})
    return(
      <div class="results-container">
        <ul class="card-list center">
          { itemslist }
         </ul>
      </div>   
      );

  }
}

【问题讨论】：

标签： javascript function reactjs frontend

【解决方案1】：

您应该将您的render 更改为以下代码。使用that 而不是this。

var items = this.props.resultsArray;
var that = this;
var itemslist = items.map(function(item, index){
      return(
          <li key={ index } className="card" >
            <div className="card-header">
                <span className="hour-price"><span>{ item.hourPrice } &euro; /hour</span></span>
                <img src={ item.image } className="card-img" />
                <a href="javascript:" onClick={that.handleClick.bind(that, index)} className="book-button">Book</a>
            </div>
           ......

【讨论】：

x 参数不在范围内
@RedMercury。我的错。我已经改变了答案。谢谢。
@RedMercury 你有解决办法吗？
不确定，但您尝试过onClick={() => this.handleClick(index)} 吗？箭头函数没有this 上下文并在其父范围内使用它，因此不需要bind。
@user3209048 我已更改答案以解决此问题。直接原因是您应该将index 传递给handleClick 而不是{index}。此外，您应该将所有class 更改为className 以使您的css styles 工作。