ReactJS передающий объект вместо функции внутри onClick

Question

Я совершенно новый, чтобы реагировать и почти все, что с ним связано. Я все еще изучаю шаблон MVC. Я просто беру примеры на главной странице React и пытаюсь их расширить, но у меня возникает ошибка, когда я пытаюсь добавить «onClick» к тегу span, который я включаю с каждым todo.

Вот что я делаю: 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.

Я не могу найти решение самостоятельно, и я некоторое время борется, и я надеялся, что кто-то может указать мне в правильном направлении. Я буду очень признателен! Спасибо огромное!

Answer 1

Вот ваш код решение:

Вы должны связать this к CreateItem иначе он не может ссылаться на функцию markComplete вашего React класса. Кроме того, 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> 
    } 
});