亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 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 關注
  • 146 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號