Javascript React 中的确认窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52034868/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Confirm Window in React
提问by LittleBigBoy
I have this following code :
我有以下代码：
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>
)
})
}
And I have this function too:
我也有这个功能：
removeToCollection(key, e) {
const item = key;
firebase.database().ref(`catalogue/${item}`).remove();
}
When I use the function without a confirm window in my "onclick" button, the code work great. But when I want use a confirm window, the confirm window show when I click on my button, but my item is not delete.
当我在“onclick”按钮中使用没有确认窗口的功能时，代码运行良好。但是当我想使用确认窗口时，当我点击我的按钮时会显示确认窗口，但我的项目没有被删除。
Any idea ?
任何的想法 ？
Thank for your help !
感谢您的帮助 ！
回答by andriusain
Basically you're binding the function instead of calling it... you should bind beforehand, preferably in the constructor... then call it. Try this:
基本上你是绑定函数而不是调用它......你应该事先绑定，最好在构造函数中......然后调用它。尝试这个：
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>
)
})
}回答by RIYAJ KHAN
You are just binding function and not calling it.
你只是绑定函数而不是调用它。
The right synatx to use bindand called binded function.
使用正确的语法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();
}
OR you can do like this as well without bind.
或者你也可以在没有绑定的情况下这样做。
if (window.confirm("Delete the item?")) {
this.removeToCollection(11);
}
If thisis concern inside removeToCollectionthen use arrow functionto define it.
如果这是内部问题，removeToCollection则使用arrow function来定义它。
removeToCollection=(key)=> {
console.log(key);
}
Working codesandbox demo
在职的 codesandbox demo
回答by S.Yadav
I did the same as below-
我做了与下面相同的事情-
I have a smart(class) component
我有一个智能（类）组件
<Link to={`#`} onClick={() => {if(window.confirm('Are you sure to delete this record?')){ this.deleteHandler(item.id)};}}> <i className="material-icons">Delete</i> </Link>
I defined a function to call the delete endpoint as-
我定义了一个函数来调用删除端点为-
deleteHandler(props){
axios.delete(`http://localhost:3000/api/v1/product?id=${props}`)
.then(res => {
console.log('Deleted Successfully.');
})
}
And that worked for me!
这对我有用！
