Schaltfläche funktioniert nicht in React

Question

Ich kann nicht herausfinden, warum meine handleDelete Funktion nicht ausgeführt wird. Wenn ich auf "Löschen" klicke, passiert gar nichts.

In Dev-Tools sehe ich den Wert für die Schaltfläche zum Löschen ist korrekt, aber onClick mit seinen Attributen wird überhaupt nicht angezeigt.

var MainContainer = React.createClass({ 
    getInitialState: function(){ 
     return { 
     name: 'JK_MNO', 
     friends: [], //friends is items 
     text: '' 
     } 
    }, 
    handleChange: function(e){ 
     //like the onChange function 
     this.setState({ 
      text: e.target.value 
     }); 
    }, 
    handleSubmit: function(e){ 
     e.preventDefault(); 
     if(this.state.text !== '') { 
     var nextfriend = this.state.friends.concat([{ 
      text: this.state.text, id: Date.now() 
     }]); 
     var nextText = ''; 
     this.setState({ 
      friends: nextfriend, text: nextText 
     }); 

     } 
    }, 
    handleDelete: function(e){ 
     console.log(this.state.friends); 
     this.friends.splice (this.props.friend.id); 
     this.setState({ 
     friends: friends 
     }); 
    }, 
    render: function(){ 
     return (
     <div> 
      <h3> Name: {this.state.name} </h3> 
      <ShowList friends={this.state.friends} /> 
      <form onSubmit={this.handleSubmit} > 
       Enter Friends: <input className="friendInput" onChange={this.handleChange} value={this.state.text} /> 
      </form> 
     </div> 
    ); 
    } 
}); 

var ShowList = React.createClass({ 
    render: function() { 
    var createFriend = function(friend) { 
     return (
     <li key={friend.id}>{friend.text} <button onClick={this.props.handleDelete} value={friend.id}>Delete</button> </li> 
    ); 
    }; 
    return <ul>{this.props.friends.map(createFriend.bind(this))}</ul>; 
    } 
}); 

ReactDOM.render(<MainContainer />, document.getElementById('container')); 

https://jsfiddle.net/USERALPHA32/bdc9trux/

Answer 1

Ganz in der Nähe! Sie müssen nur Ihre Löschfunktion zu überliefern zu ShowList als Stütze:

Aktuell:

<ShowList friends={this.state.friends} /> 

Empfehlung:

<ShowList friends={this.state.friends} handleDelete={this.handleDelete} />