我想当我单击删除按钮时,它会弹出一个确认对话框。
我尝试使用sweetAlert
,但未显示任何弹出窗口。
弹出式方法:
popupdel() {
swal({
title: "Are you sure?",
text: "Your will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
}, function() {
swal("Deleted!", "Your imaginary file has been deleted.", "success");
});
}
删除方法:
delete(Code) {
axios.delete('http://localhost:4000/app/deleteclient/' + Code).then(function(clients) {
this.setState({ clients: clients.records });
}.bind(this));
}
<button style={btn} onClick={(Code) => this.delete(client.Code)} type="button"><i class="fa fa-trash-o"></i></button>
如何使弹出窗口显示在单击按钮上?
答案 0 :(得分:1)
就在上周,我为SweetAlert2创建了自己的React包装器组件。 (NPM上已经有一些包装器类,但是我不喜欢它们的工作方式,所以我制作了自己的包装器。)以下链接是这两个功能齐全的示例:A)我的SweetAlert2的包装器组件,以及B)根据用户输入启动警报的两种不同方式。
https://stackblitz.com/edit/react-sweetalert2-wrapper
链接的示例显示了如何声明式启动警报(例如,在render()
函数内拼写JSX代码,然后切换状态为show
的变量)或强制性地(例如,离开render()
函数内的警报的占位符,该占位符动态填充了null
或新生成的警报的内容。
答案 1 :(得分:0)
使用react可以有一个模态组件。当用户单击删除按钮时,将显示模式,并且只有在单击确认按钮时才调用删除功能
答案 2 :(得分:0)
如果我了解您要实现的目标:
然后根据您的应用程序结构将方法向下传递到您的按钮。
class Example extends React.Component {
constructor() {
super();
this.state = {
isPopupShown: false
}
this.togglePopup = this.togglePopup.bind(this);
}
togglePopup() {
this.setState(prevState => ({
isPopupShown: !prevState.isPopupShown
}));
}
render() {
return (
<div>
<button onClick={ this.togglePopup }>
toggle popup
</button>
{ this.state.isPopupShown === true ? <div>popup shown!</div> : <div>popup hidden!</div> }
</div>
)
}
}
ReactDOM.render(<Example />, document.querySelector("#app"))
这是一个jsfiddle,显示了如何切换某些内容:http://jsfiddle.net/n5u2wwjg/100862/
答案 3 :(得分:0)
使用确认而不是警报或sweetAlert:
delete(Code) {
if( confirm('Sure want to delete?')) {
axios.delete('http://localhost:4000/app/deleteclient/' + Code).then(function(clients) {
this.setState({ clients: clients.records });
)}
else {
// Do something..
} }.bind(this));
<button style={btn} onClick={(Code) => this.delete(client.Code)} type="button"><i class="fa fa-trash-o"></i></button>