javascript - 在React中确认窗口

我有以下代码:

renderPosts() {
return _.map(this.state.catalogue, (catalogue, key) => {
  return (
    <div className="item col-md-3" key={key} id={key}>
        <img src={this.state.catalogue[key].avatarURL} height={150} with={150}/>
        <h3>{catalogue.marque}</h3>
        <h4>{catalogue.numero}</h4>
        <h4>{catalogue.reference}</h4>
        <p>{catalogue.cote}</p>
        <div className="text-center">
        <button className="btn btn-danger" onClick={() => {if(window.confirm('Delete the item?')){this.removeToCollection.bind(this, key)};}}>Supprimer</button>
        </div>

    </div>
  )
 })
}

我也有这个功能:

removeToCollection(key, e) {

  const item = key;
  firebase.database().ref(`catalogue/${item}`).remove();
 }

当我在“onclick”按钮中使用没有确认窗口的功能时，代码会很好用。但是，当我要使用确认窗口时，单击我的按钮时会显示确认窗口，但是我的项目没有被删除。

任何想法 ？

谢谢您帮忙 !

最佳答案

基本上，您是在绑定(bind)函数而不是调用它……您应该事先绑定(bind)，最好是在构造函数中……然后调用它。
试试这个:

renderPosts() {
  this.removeToCollection = this.removeToCollection.bind(this);
  return _.map(this.state.catalogue, (catalogue, key) => {
    return (
      <div className="item col-md-3" key={key} id={key}>
          <img src={this.state.catalogue[key].avatarURL} height={150} with={150}/>
          <h3>{catalogue.marque}</h3>
          <h4>{catalogue.numero}</h4>
          <h4>{catalogue.reference}</h4>
          <p>{catalogue.cote}</p>
          <div className="text-center">
          <button className="btn btn-danger" onClick={() => {if(window.confirm('Delete the item?')){this.removeToCollection(key, e)};}}>Supprimer</button>
          </div>

      </div>
    )
  })
}

关于javascript - 在React中确认窗口，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52034868/