버튼이 작동하지 않음

Question

handleDelete 기능이 실행되고 있지 않은 이유를 알 수 없습니다. '삭제'를 클릭해도 아무런 변화가 없습니다.

dev 도구에서 나는 삭제 버튼의 값이 정확하다는 것을 알고 있지만 그 속성이 전혀 나타나지 않는 onClick이 전혀 나타나지 않습니다.

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

아주 가까이! 당신은 소품으로 ShowList에 삭제 기능을 전달해야

현재 :

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

가 제안 :

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