react-router中離開確認組件Prompt

在某些頁面中，特別是設計到多個表單項填寫的，產品需求要求：在離開頁面時，須要提示用戶當前頁面的數據還沒有保存，二次確認後才能離開頁面。

大概效果如圖：

幸運的是，在react-router 4中自帶此類組件Prompt，這是官方示例。

支持的參數也比較簡單：

1. when：設置是否啓用Prompt功能。好比表單頁未填寫時，就不須要離開確認。
2. message：string。設置Prompt提示內容
3. message：function。此時返回參數分爲true/false，即bool類型。返回false就繼續停留在當前頁面，返回true則跳轉到新頁面。

因此結合參數when和message function能夠創造無限可能，好比指定提示框等，哈哈哈哈。下面給出兩篇文章參考：

1. react-router 4中離開確認自定義
2. react-router4相關屬性api介紹

我在實際項目中，也是用到自定義彈窗的ant-design-mobile的Modal對話框，可是Modal的按鈕點擊函數是箭頭函數，和正常狀況下window.confirm同步返回不同。因此這裏須要利用Prompt的參數when和message function、React的render，代碼以下：

render() {
    const { isPrompt } = this.state;
    return (
      <div className={styles.contain}> <Prompt when={isPrompt} message={(location) => { if (!isPrompt) { return true; } Modal.alert('提示', '是否確認退出補充實名資料?', [ { text: '取消' }, { text: '確認', onPress: () => this.setState({ isPrompt: false, }, () => this.props.dispatch(routerRedux.goBack()) ), }, ]); return false; } } /> </div> ) } 複製代碼

代碼邏輯應該比較好懂，下面列出關鍵點：

1. isPrompt：控制是否啓用 Prompt。
2. message function：默認都返回false，表示繼續停留在當前頁面。
3. setState：根據Modal的點擊，去改變isPrompt的值，而後再手動執行回退操做，這時Prompt未啓動，就能正常離開頁面。

上述步驟就順利將異步轉爲同步，應該能實現不少變態的需求。