web-dev-qa-db-ja.com

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」ボタンの確認ウィンドウなしで関数を使用すると、コードがうまく機能します。しかし、確認ウィンドウを使用したい場合、ボタンをクリックすると確認ウィンドウが表示されますが、アイテムは削除されていません。

何か案が ？

助けてくれてありがとう ！

javascriptreactjsfirebasefirebase-realtime-databaseconfirm
3
LittleBigBoy

基本的に、関数を呼び出すのではなく、関数をバインドしています...事前に、できればコンストラクターでバインドする必要があります...次に、関数を呼び出します。これを試して：

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>
    )
  })
}
9
andriusain

関数をバインドしているだけで、呼び出していません

使用する正しいsynatx bind と呼ばれ、binded関数を呼び出します。

if (window.confirm("Delete the item?")) {
    let removeToCollection = this.removeToCollection.bind(this, 11);//bind will return to reference to binded function and not call it.
    removeToCollection();
}

または、バインドせずにこのようにすることもできます。

if (window.confirm("Delete the item?")) {
  this.removeToCollection(11);
}

thisがremoveToCollection内で懸念される場合は、 arrow function それを定義します。

removeToCollection=(key)=> {
    console.log(key);
  }

動作中 codesandbox demo

1
RIYAJ KHAN

私は以下と同じことをしました-

Smart（class）コンポーネントがあります

<Link to={`#`} onClick={() => {if(window.confirm('Are you sure to delete this record?')){ this.deleteHandler(item.id)};}}> <i className="material-icons">Delete</i> </Link>

削除エンドポイントを呼び出す関数を次のように定義しました-

deleteHandler(props){
    axios.delete(`http://localhost:3000/api/v1/product?id=${props}`)
    .then(res => {
      console.log('Deleted Successfully.');
    })
  }

そしてそれは私のために働いた！

0
S.Yadav