ReactJS 在 onClick 中传递对象而不是函数答案

【问题标题】：ReactJS passing object instead of function inside onClickReactJS 在 onClick 中传递对象而不是函数
【发布时间】：2015-07-11 01:13:12
【问题描述】：

我对 React 以及与它相关的几乎所有东西都是全新的。我还在学习 MVC 模式。我只是在 React 主页上获取示例并尝试扩展它们，但是当我尝试将“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”跨度，我会收到以下错误：

错误：不变违规：预期 onClick 侦听器是一个函数，而不是类型对象。

我自己找不到解决方案，我已经挣扎了一段时间，我希望有人能指出我正确的方向。我会很感激！非常感谢！

【问题讨论】：

链接的codepen，当我点击“添加待办事项”时，它console.logs但没有把我带到我可以标记完成的地方。只有我吗？
现在它什么都没有放到 DOM 上
此链接：jsfiddle.net/69z2wepo/11885?
那个正在工作，但我没有收到错误，它只是没有做任何事情。给我一点时间来摆弄它。
我为您解决了您的问题，请查看我的答案。它应该在一段时间前工作，但我遇到了 JSFiddle 的问题。

标签： javascript reactjs

【解决方案1】：

这是您的解决方案代码：

你必须绑定 this 到 createItem 否则它不能引用你的 React 类的 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>
    }
});

【讨论】：