第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

使用 React & Redux 進(jìn)行確認(rèn)模態(tài)

使用 React & Redux 進(jìn)行確認(rèn)模態(tài)

qq_花開花謝_0 2022-08-18 16:30:26
我正在制作一個(gè)應(yīng)用程序,其中我需要制作一個(gè)確認(rèn)框來詢問用戶是否要?jiǎng)h除該記錄。我想全局使用確認(rèn)框。假設(shè)我要?jiǎng)h除一條記錄,當(dāng)用戶單擊刪除按鈕時(shí),它會(huì)執(zhí)行刪除記錄的操作。但是,一旦進(jìn)入刪除操作,就會(huì)調(diào)度另一個(gè)操作以顯示模態(tài)。(到目前為止,我已經(jīng)達(dá)到了)但是,我在執(zhí)行應(yīng)該等待用戶單擊“確認(rèn)”或“取消”的部分遇到了困難。用戶執(zhí)行操作后,應(yīng)繼續(xù)執(zhí)行刪除記錄。我希望我的問題陳述是明確的。請(qǐng)讓我知道我應(yīng)該怎么做。我真的很想了解這個(gè)東西在 React 中是如何工作的。目前,我正在使用窗口的確認(rèn)來詢問用戶“是”或“否”。// 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'));    }};我希望調(diào)用一個(gè)模式來代替窗口確認(rèn)并等待用戶輸入,如果它返回true,我想繼續(xù)前進(jìn),否則中止。
查看完整描述

2 回答

?
慕森王

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超3個(gè)贊

您必須創(chuàng)建一個(gè)名為 Dialog 的組件,該組件在調(diào)用 deleteProfile 方法時(shí)打開,并放置兩個(gè)按鈕,一個(gè)用于取消,另一個(gè)用于刪除,當(dāng)按下刪除按鈕時(shí),您將調(diào)用刪除代碼。我建議你使用一些庫,比如 material-ui。該庫具有多個(gè)有用且非常漂亮的組件,您可以使用它們。對(duì)于這種情況,我建議您使用對(duì)話框組件。你可以這樣使用它:

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

如果 是布爾組件狀態(tài)或 redux 狀態(tài)(如果為 true),對(duì)話框?qū)⒋蜷_;并且是一種方法,您可以在其中將狀態(tài)更改為 false 以關(guān)閉對(duì)話框。dialogOpendialogClosedialogOpen

現(xiàn)在,您可以檢查一下,您就擁有了所有刪除代碼的位置。在按下刪除按鈕時(shí)調(diào)用此代碼。deleteMethod

為了同時(shí)打開對(duì)話框,您可以執(zhí)行的操作是在設(shè)置變量后放置并等待,如下所示:dialogOpen

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

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

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

你只需要像這樣調(diào)用這個(gè)方法:

await method();

我希望這有幫助!


查看完整回答
反對(duì) 回復(fù) 2022-08-18
?
夢(mèng)里花落0921

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊

單擊刪除按鈕打開確認(rèn)框。點(diǎn)擊確認(rèn)按鈕刪除記錄。


查看完整回答
反對(duì) 回復(fù) 2022-08-18
  • 2 回答
  • 0 關(guān)注
  • 153 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)