使用 React 和 Redux 制作确认模式

Question

我正在制作一个应用程序，我需要在其中制作一个确认框来询问用户是否要删除记录。我想在全球范围内使用确认框。

假设我想删除一条记录，当用户单击删除按钮时，它会执行删除记录的操作。 但是一旦在删除动作中，另一个动作被调度来显示模态。 （直到这一点我已经达到）
但是，我在执行应该等待用户单击确认或取消的部分上苦苦挣扎。 一旦用户执行了该操作，则应继续执行删除记录。

我希望我的问题陈述很清楚。

请让我知道我该怎么做。我真的很想了解这个东西在 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'));
    }
};

我希望调用一个模态来代替窗口确认并等待用户输入，如果它返回 true 我想继续前进或者中止。

Answer 1

您必须创建一个名为 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 是布尔组件状态或redux 状态，当为true 时，Dialog 将打开；而dialogClose 是一种将dialogOpen 状态更改为false 以关闭对话框的方法。

现在您可以检查您是否拥有deleteMethod，您将删除所有代码。按下删除按钮时调用此代码。

要异步打开对话框，您可以做的是在设置 dialogOpen 变量后放置并等待，如下所示：

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

或者如果你想在这样的异步方法中：

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

你只需要像这样调用方法：

await method();

我希望这会有所帮助！

Answer 2

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