ReactJS传递对象，而不是函数内部的onClick

我全新的反应，几乎一切都与它有关。我仍然在学习MVC模式。我只是在React主页上尝试扩展它们的示例，但是当我尝试将“onClick”添加到每个待办事项包含的span标记时，我遇到了一个错误。ReactJS传递对象，而不是函数内部的onClick

下面是我在做什么：https://jsfiddle.net/69z2wepo/11884/

这里是有问题的代码块：

var TodoList = React.createClass({ 
    markComplete: function(event){ 
     alert("geelo"); 
    }, 

    render: function(){ 
     var createItem = function(itemText, index){ 
      return (
       <li key={index + itemText}> 
        {itemText}<span id="markComplete" onClick={this.markComplete}>X</span> 
       </li> 
      ); 
     }; 
     return <ul id="list-container">{this.props.items.map(createItem)}</ul> 
    } 
});

具体我试图让markComplete从以下onClick={this.markComplete}

火如果我点击“markComplete”跨度，我得到以下错误：

Error: Invariant Violation: Expected onClick listener to be a function, instead got type object.

我自己找不到解决办法，而且我一直在努力一段时间，我希望有人能指引我朝着正确的方向前进。我会很感激！非常感谢！

来源

2015-07-11 Chris Frank

该codepen链接，当我点击“添加待办事项”它console.logs，但没有把我带到某处我可以标记完整。那只是我吗？ – ChadF

现在，它把没有到DOM – ChadF

此链接：http://jsfiddle.net/69z2wepo/11885/？ –

这里是您的解决方案代码：

你必须绑定this到createItem否则就不能引用您的阵营类的markComplete功能。另外，onClick是大写。

var TodoList = React.createClass({ 
    markComplete: function() { 
     console.log("geelo"); 
     alert("ANYTHING"); 
    }, 

render: function(){ 
     var createItem = function(itemText, index){ 
      return (
       <li key={index + itemText}> 
        {itemText}<span id="markComplete" onClick={this.markComplete}>X</span> 
       </li> 
      ); 
     }; 
     return <ul id="list-container">{this.props.items.map(createItem.bind(this))}</ul> 
    } 
});

来源

2015-07-11 01:40:40 ChadF

非常感谢你的工作！ –

ReactJS传递对象，而不是函数内部的onClick

回答

相关问题