ReactJS傳遞對象，而不是函數內部的onClick

我全新的反應，幾乎一切都與它有關。我仍然在學習MVC模式。我只是在React主頁上嘗試擴展它們的示例，但是當我嘗試將「onClick」添加到每個待辦事項包含的span標記時，我遇到了一個錯誤。ReactJS傳遞對象，而不是函數內部的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」跨度，我得到以下錯誤：

Error: Invariant Violation: Expected onClick listener to be a function, instead got type object.

我自己找不到解決辦法，而且我一直在努力一段時間，我希望有人能指引我朝着正確的方向前進。我會很感激！非常感謝！

來源

2015-07-11 Chris Frank

該codepen鏈接，當我點擊「添加待辦事項」它console.logs，但沒有把我帶到某處我可以標記完整。那只是我嗎？ – ChadF

現在，它把沒有到DOM – ChadF

此鏈接：http://jsfiddle.net/69z2wepo/11885/？ –

這裏是您的解決方案代碼：

你必須綁定this到createItem否則就不能引用您的陣營類的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> 
    } 
});

來源

2015-07-11 01:40:40 ChadF

非常感謝你的工作！ –

ReactJS傳遞對象，而不是函數內部的onClick

回答

相關問題