反應onClick問題

Question

我是新來的React，我試圖將一個onClick事件連接到一個圖像，看看哪些對象被按下但沒有得到它的工作，我試過了幾個答案，我發現在這個網站上但沒有工作，可能是因爲「var createItem」？

/** @jsx React.DOM */ 

var React = require("react"); 
var Firebase = require("firebase"); 


// CHILD 
var CardsList = React.createClass({ 
    render: function() { 
     var createItem = function(card, index) { 
      return <div id='card' key={ index }><img onClick={ this.props.onClick.bind(null, this) } src=  { card.url }/></div>; 
    }; 
    return <div id='cards'>{ this.props.cards.map(createItem) }</div>; 
    } 
}); 


//PARENT 
var DeckCalculator = React.createClass({ 
    getInitialState: function() { 
     this.cards = []; 
     this.userCards = []; 
    return {cards: [], name:"default", url:"defaultURL"}; 
}, 
    handleOnAdd: function(component, event){ 
     // Add the clicked card to userCards[] 
    }, 
    render: function() { 
    return (
     <div> 
     <h3>All Cards</h3> 
     <CardsList onClick={ this.handleOnAdd } cards={ this.state.cards } /> 
     </div> 
    ); 
    } 
}); 

此代碼提供了錯誤：未捕獲的類型錯誤：未定義

Answer 1

你createItem 無法讀取屬性的「onClick」有錯誤的情況下。

var createItem = function(card, index) { 
    return (
    <div id='card' key={index}> 
     <img onClick={this.props.onClick.bind(null, this)} src={ card.url } /> 
    </div 
); 
}.bind(this); 

注意.bind(this)最後。

有關爲什麼this更多的信息（哈哈），查看這篇文章https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this