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

Question

我是React的新手,几乎所有与之相关的东西.我还在学习MVC模式.我只是在React主页上进行示例并尝试扩展它们,但是当我尝试将"onClick"添加到我包含在每个待办事项中的span标记时,我遇到了错误.

以下是我正在做的事情: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>
    }
});