使用 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 方法时打开，并放置两个按钮，一个用于取消，另一个用于删除，当按下删除按钮时，您将调用删除代码。我建议你使用一些库，比如&nbsp;material-ui。该库具有多个有用且非常漂亮的组件，您可以使用它们。对于这种情况，我建议您使用对话框组件。你可以这样使用它：<Dialog&nbsp; &nbsp;open={dialogOpen}&nbsp; &nbsp;onClose={dialogClose}&nbsp; &nbsp;>&nbsp; &nbsp;<DialogContent>&nbsp; &nbsp; &nbsp; Are you Sure? Your account would be permanently lost&nbsp; &nbsp;</DialogContent>&nbsp; &nbsp;<DialogActions>&nbsp; &nbsp; &nbsp; <Button>Cancel</Button>&nbsp; &nbsp; &nbsp; <Button onClick={deleteMethod}>Delete</Button>&nbsp; &nbsp;</DialogActions></Dialog>如果 是布尔组件状态或 redux 状态（如果为 true），对话框将打开;并且是一种方法，您可以在其中将状态更改为 false 以关闭对话框。dialogOpendialogClosedialogOpen现在，您可以检查一下，您就拥有了所有删除代码的位置。在按下删除按钮时调用此代码。deleteMethod为了同时打开对话框，您可以执行的操作是在设置变量后放置并等待，如下所示：dialogOpenawait&nbsp;this.setState({dialogOpen:&nbsp;true});或者，如果您希望在异步方法中如下所示：const&nbsp;method&nbsp;=&nbsp;async&nbsp;()&nbsp;=>{&nbsp;&nbsp;await&nbsp;this.setState({dialogOpen:&nbsp;true}); }你只需要像这样调用这个方法：await&nbsp;method();我希望这有帮助！

Answer 2

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