ReactJS - ToDoアプリ、リストからアイテムを削除する

Question

私はここで間違っているのか分かりません。 ReactJSは私にはかなり新しく、正しい方向への助けが必要です。

私が達成したいのは、単一のリストアイテムでスパンをクリックしたときにリストアイテムを削除する必要があることです。私は、親コンポーネントでremoveHandler関数を作成し、関数を小道具で渡してみました。

：私はこれらの二つの成分を持っている

Uncaught TypeError: Cannot read property 'props' of undefined 
at createTasks (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:9556:26) 
at Array.map (native) 
at Object.render (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:9562:33) 
at file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13530:21 
at measureLifeCyclePerf (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:12809:12) 
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13529:25) 
at ReactCompositeComponentWrapper._renderValidatedComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13556:32) 
at ReactCompositeComponentWrapper._updateRenderedComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13480:36) 
at ReactCompositeComponentWrapper._performComponentUpdate (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13458:10) 
at ReactCompositeComponentWrapper.updateComponent (file:///C:/Users/Laurens/Desktop/ReactJS/output/myCode.js:13379:12) 

ない私が間違っているのかわから、 ：

コードは罰金コンパイルが、私は、ブラウザでそれを実行しようとすると、私は私のコンソールでこれを取得します

var TodoList = React.createClass({ 
getInitialState: function() { 
return { 
    items: [] // De initial state (state wanneer het component gemount wordt) voor items wordt aangemaakt en is per definitie leeg. 
    }; 
}, 
addItem: function(e) { 
    var itemArray = this.state.items; 

    if(this._inputElement.value){ // Controleer of er een value is gepost. Een lege taak willen we immers niet toevoegen aan de todoItems. 
    itemArray.push(// Zoja, push dan een een nieuw item aan de itemArray. 
    { 
     text: this._inputElement.value, // De text van het volgende item is gelijk aan wat er in het textfield is ingevoerd. 
     key: Date.now() // De key moet uniek zijn, dus gebruiken we Date.now() voor een zoe goed als unieke key. 
    } 
); 
} 

this.setState({ 
    items: itemArray // Vervolgens update de state items met itemArray. 
}); 

this._inputElement.value = "";// Het textfield wordt weer leeg gemaakt. 

e.preventDefault(); 
}, 
handleRemove: function(id){ 
const remainder = this.state.data.filter((item) => { 
    if(item.key !== id) return item; 
}); 

this.setState({ 
    items: remainder 
}); 
}, 
render: function() { 
    return (
    <div className="todoListMain"> 
     <div className="header"> 
     <h3>ToDo lijst webapp</h3> 
     <form onSubmit={this.addItem}> 
      <input ref={(a) => this._inputElement = a} placeholder="enter task"> 
      </input> 
      <button type="submit">add</button> 
     </form> 
     </div> 
     <TodoItems remove={this.handleRemove} entries={this.state.items}/> 
    </div> 
); 
} 
}); 

そして次

var TodoItems = React.createClass({ 
    render: function() { 
    var todoEntries = this.props.entries; 

    function createTasks(item) { 
     return <li key={item.key}>{item.text}<span onClick={this.props.handleRemove(item.key)}>X</span></li> 
    } 

    var listItems = todoEntries.map(createTasks); 
    return (
     <ul className="theList"> 
     {listItems} 
     </ul> 
    ); 
    } 
    }); 

Answer 1

変更<span onClick={this.props.handleRemove(item.key) ： <span onClick={this.props.remove(item.key)に小道具名は

をhandleRemoveともthis.props.remove.bind(this, item.key)

Answer 2

ダビデは本当ですが、あなたは追加のことを行う必要があるので、私は修正と一緒にデビッドの答えをコピーしていた何todoEntries.map(createTasks, this);をしないで削除され

変更<span onClick={this.props.handleRemove(item.key)<span onClick={this.props.remove.bind(this)(item.key)に小道具名が、これは事実ですが、それはERを起こさない

Answer 3

var TodoItems = React.createClass({ 
    render: function() { 
     var todoEntries = this.props.entries; 

     function createTasks(item) { 
     return <li key={item.key}>{item.text}<span onClick={() => this.props.remove(item.key)}>X</span></li>; 
     } 

     var listItems = todoEntries.map(createTasks,this); 
     return (
     <ul className="theList"> 
      {listItems} 
     </ul> 
    ); 
    } 
    });