ReactJS - ToDo App, entfernen Sie Elemente aus der Liste

Question

Ich bin mir nicht sicher, was ich hier falsch mache. ReactJS ist ziemlich neu für mich, also brauche ich Hilfe in die richtige Richtung.

Was ich erreichen möchte ist, wenn der Bereich auf ein einzelnes Listenelement geklickt wird, sollte es das Listenelement entfernen. Ich habe eine removeHandler-Funktion für die übergeordnete Komponente erstellt und versucht, die Funktion über Requisiten zu übergeben.

Der Code kompiliert in Ordnung, aber wenn ich versuche, es im Browser laufen zu lassen ich dies in meiner Konsole:

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) 

nicht sicher, was ich falsch mache, Ich habe diese zwei Komponenten:

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

Und der folgende:

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

Änderung <span onClick={this.props.handleRemove(item.key) zu <span onClick={this.props.remove(item.key) die Requisiten Name ist nicht

und tun todoEntries.map(createTasks, this); auch this.props.remove.bind(this, item.key)

Answer 2

was David sagte, ist wahr, aber Sie müssen handleRemove entfernen, um eine weitere Sache zu tun, so dass ich das Kopieren von David Antwort zusammen mit dem Update:

Änderung <span onClick={this.props.handleRemove(item.key)-<span onClick={this.props.remove.bind(this)(item.key) die Requisiten Name nicht

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