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>
   );
   }
});

此代码给出错误：Uncaught TypeError：无法读取未定义的属性'onClick'

Answer 1

您的createItem背景错误。

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

反应onClick问题

1 个答案: