web-dev-qa-db-fra.com

Confirmer la fenêtre dans React

J'ai ce code suivant:

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

Et j'ai aussi cette fonction:

removeToCollection(key, e) {

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

Lorsque j'utilise la fonction sans fenêtre de confirmation dans mon bouton "onclick", le code fonctionne très bien. Mais lorsque je souhaite utiliser une fenêtre de confirmation, la fenêtre de confirmation s'affiche lorsque je clique sur mon bouton, mais mon article n'est pas supprimé.

Une idée ?

Merci pour votre aide!

javascriptreactjsfirebasefirebase-realtime-databaseconfirm
3
LittleBigBoy

Fondamentalement, vous liez la fonction au lieu de l'appeler ... vous devez lier au préalable, de préférence dans le constructeur ... puis l'appeler. Essaye ça:

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

Vous êtes juste une fonction de liaison et ne l'appelez pas.

Le bon synatx à utiliser bind et appelé la fonction 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();
}

OU vous pouvez faire comme ça aussi sans lier.

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

Si cela est un problème à l'intérieur de removeToCollection alors utilisez arrow function pour le définir.

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

Travail codesandbox demo

1
RIYAJ KHAN

J'ai fait la même chose que ci-dessous-

J'ai un composant intelligent (classe)

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

J'ai défini une fonction pour appeler le point de terminaison de suppression as-

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

Et cela a fonctionné pour moi!

0
S.Yadav