为了账号安全,请及时绑定邮箱和手机立即绑定

使用 React & Redux 进行确认模态

使用 React & Redux 进行确认模态

qq_花开花谢_0 2022-08-18 16:30:26
我正在制作一个应用程序,其中我需要制作一个确认框来询问用户是否要删除该记录。我想全局使用确认框。假设我要删除一条记录,当用户单击删除按钮时,它会执行删除记录的操作。但是,一旦进入删除操作,就会调度另一个操作以显示模态。(到目前为止,我已经达到了)但是,我在执行应该等待用户单击“确认”或“取消”的部分遇到了困难。用户执行操作后,应继续执行删除记录。我希望我的问题陈述是明确的。请让我知道我应该怎么做。我真的很想了解这个东西在 React 中是如何工作的。目前,我正在使用窗口的确认来询问用户“是”或“否”。// Delete Profileexport 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'));    }};我希望调用一个模式来代替窗口确认并等待用户输入,如果它返回true,我想继续前进,否则中止。
查看完整描述

2 回答

?
慕森王

TA贡献1777条经验 获得超3个赞

您必须创建一个名为 Dialog 的组件,该组件在调用 deleteProfile 方法时打开,并放置两个按钮,一个用于取消,另一个用于删除,当按下删除按钮时,您将调用删除代码。我建议你使用一些库,比如 material-ui。该库具有多个有用且非常漂亮的组件,您可以使用它们。对于这种情况,我建议您使用对话框组件。你可以这样使用它:

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

如果 是布尔组件状态或 redux 状态(如果为 true),对话框将打开;并且是一种方法,您可以在其中将状态更改为 false 以关闭对话框。dialogOpendialogClosedialogOpen

现在,您可以检查一下,您就拥有了所有删除代码的位置。在按下删除按钮时调用此代码。deleteMethod

为了同时打开对话框,您可以执行的操作是在设置变量后放置并等待,如下所示:dialogOpen

await this.setState({dialogOpen: true});

或者,如果您希望在异步方法中如下所示:

const method = async () =>{  await this.setState({dialogOpen: true});
}

你只需要像这样调用这个方法:

await method();

我希望这有帮助!


查看完整回答
反对 回复 2022-08-18
?
梦里花落0921

TA贡献1772条经验 获得超6个赞

单击删除按钮打开确认框。点击确认按钮删除记录。


查看完整回答
反对 回复 2022-08-18
  • 2 回答
  • 0 关注
  • 125 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号