![](/img/trans.png)
[英]Confirmation modal connecting to redux store using mapStateToProps gives an ERROR
[英]Make a Confirmation Modal using React & Redux
我正在制作一个应用程序,我需要在其中制作一个确认框来询问用户是否要删除记录。 我想在全球范围内使用确认框。
假设我要删除一条记录,当用户点击删除按钮时,它会执行删除记录的操作。 但是一旦进入删除操作,就会调度另一个操作来显示模态。 (直到这一点我已经达到)
但是,我在执行应该等待用户单击确认或取消的部分上苦苦挣扎。 一旦用户执行了操作,删除记录的执行就应该继续。
我希望我的问题陈述很清楚。
请让我知道我该怎么做。 我真的很想了解这个东西在 React 中是如何工作的。
目前,我正在使用窗口确认询问用户是或否。
// Delete Profile
export const deleteProfile = (history) => async (dispatch) => {
try {
if (
window.confirm('Are you Sure? Your account would be permanently lost')
) {
await axios.delete(`/api/profile`);
dispatch({ type: actionTypes.CLEAR_PROFILE });
dispatch({ type: actionTypes.ACCOUNT_DELETED });
history.push('/login');
dispatch(
setAlert('Your account has been deleted permanently', 'success')
);
}
} catch (err) {
dispatch(setAlert('Profile deletion error', 'danger'));
}
};
我希望调用一个模式来代替 window 确认并等待用户输入,如果它返回 true 我想继续前进或者中止。
您必须创建一个名为 Dialog 的组件,它会在调用 deleteProfile 方法时打开,并放置两个按钮,一个用于取消,另一个用于删除,当按下删除按钮时,您将调用删除代码。 我建议你使用像material-ui这样的库。 该库有多个有用且非常漂亮的组件供您使用。 对于这种情况,我特别推荐您使用Dialog组件。 你可以像这样使用它:
<Dialog
open={dialogOpen}
onClose={dialogClose}
>
<DialogContent>
Are you Sure? Your account would be permanently lost
</DialogContent>
<DialogActions>
<Button>Cancel</Button>
<Button onClick={deleteMethod}>Delete</Button>
</DialogActions>
</Dialog>
其中dialogOpen
是 boolean 组件 state 或 redux state 为真时,对话框将打开; dialogClose
是一种方法,您可以在其中将dialogOpen
state 更改为 false 以关闭对话框。
现在你可以检查你有deleteMethod
,所有你删除的代码都将在其中。 按下删除按钮时调用此代码。
要异步打开对话框,您可以在设置dialogOpen
变量后放置并等待,如下所示:
await this.setState({dialogOpen: true});
或者如果你想要一个像这样的异步方法:
const method = async () =>{
await this.setState({dialogOpen: true});
}
你只需要像这样调用方法:
await method();
我希望这有帮助!
单击删除按钮打开确认框。 单击确认按钮删除记录。
谢谢。 我试过了,它真的很管用。 我怎么没想到。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.