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