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

Question

我是React的新手，几乎所有与之相关的东西。 我仍在学习MVC模式。 我只是在React主页上获取示例并尝试扩展它们，但是当我尝试向要包含在每个待办事项中的span标签添加“ 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侦听器是一个函数，而是类型对象。

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

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