javascript - 按钮在 React 中不起作用

Question

我无法弄清楚为什么我的 handleDelete 函数没有运行。当我单击“删除”时，什么也没有发生。

在开发工具中，我看到删除按钮的值是正确的，但 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

非常接近!您只需将删除函数作为 prop 传递给 ShowList 即可:

当前:

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

建议:

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