Подтвердить окно в реакции - PullRequest
Новая
       27

Подтвердить окно в реакции

0 голосов
/ 27 августа 2018

У меня есть следующий код: 

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»,код работает отлично.Но когда я хочу использовать окно подтверждения, окно подтверждения отображается, когда я нажимаю кнопку, но мой элемент не удаляется.

Есть идеи?

Спасибо за помощь!

Ответы [ 3 ]

0 голосов
/ 27 августа 2018

Вы просто связываете функцию и не вызываете ее.

Правильный синтаксис для использования bind и вызываемой bind функции ed. 

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

Если это относится к removeToCollection, тогда используйте arrow function, чтобы определить его. 

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

Рабочая codesandbox demo

0 голосов
/ 25 апреля 2019

Я сделал так же, как ниже-

У меня есть смарт (класс) компонент 

<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 голосов
/ 27 августа 2018

По сути, вы связываете функцию, а не вызываете ее ... вы должны связать ее заранее, желательно в конструкторе ... а затем вызвать ее.Попробуйте это: 

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