Javascript 按钮在React中不工作

我不明白为什么我的

handleDelete

函数没有运行。当我点击“删除”时，什么都没有发生

在dev tools中，我看到delete按钮的值是正确的，但是带有属性的

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

var MainContainer=React.createClass({
getInitialState:函数（）{
返回{
姓名：“JK_MNO”，
朋友：[]，//朋友是项目
文本：“”
}
},
handleChange:函数（e）{
//就像onChange函数一样
这是我的国家({
文本：e.target.value
});
},
handleSubmit:函数（e）{
e、 预防默认值（）；
如果（this.state.text！=''）{
var nextfriend=this.state.friends.concat([{
text:this.state.text，id:Date.now（）
}]);
var nextText=''；
这是我的国家({
朋友：nextfriend，文本：nextText
});
}
},
handleDelete：函数（e）{
console.log（this.state.friends）；
this.friends.splice（this.props.friends.id）；
这是我的国家({
朋友：朋友
});
},
render:function（）{
返回(
名称：{this.state.Name}
输入好友：
);
}
});
var ShowList=React.createClass({
render:function（）{
var createFriend=函数（friend）{
返回(
{friend.text}删除
);
};
return
{this.props.friends.map（createFriend.bind（this））}
；
}
});
ReactDOM.render（，document.getElementById（'container'））；

---

非常接近！您只需将删除功能作为道具传递到

ShowList

：

当前：

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

建议：

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

始终在问题中直接包含相关代码。FWIW，自行调试的第一步是检查

this.props.handleDelete

内部

步骤列表的值。您会看到它是
未定义的
。当然，如果没有函数，单击就不能调用任何东西！然后，您应该检查道具是如何传递到
StepList
的，在那里您会看到道具根本没有传递。