Question

我是React的新手，几乎所有与之相关的东西。我还在学习MVC模式。我只是在React主页上进行示例并尝试扩展它们，但是当我尝试添加＆＃34; onClick＆＃34;时，我遇到了错误。到每个todo包含的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}

如果我点击＆＃34; markComplete＆＃34; span我收到以下错误：

错误：不变违规：预期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>
    }
});

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

1 个答案: