快捷導(dǎo)航

關(guān)于react-router中的Prompt組件使用心得

更新時間：2023年01月17日 15:18:21 作者：IsQtion

這篇文章主要介紹了關(guān)于react-router中的Prompt組件學(xué)習(xí)心得,Prompt組件作用是,在用戶準(zhǔn)備離開該頁面時,?彈出提示,?返回true或者false,?如果為true,?則離開頁面,?如果為false,?則停留在該頁面，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下

在最近的react項目中, 遇到了一個需求, 點擊圖片的時候, 會出現(xiàn)一個大圖預(yù)覽, 其實就是一個遮罩層, 專門用來顯示大圖的, 但因為是一個APP, 所以難免會有用戶點開大圖后, 不用正常的關(guān)閉按鈕關(guān)閉大圖遮罩層, 而是點擊手機的返回鍵,這樣就會造成頁面后退, 而不僅僅只是關(guān)閉遮罩層了, 所以在此, 我決定使用react-router里的Prompt組件

Prompt

組件作用

該組件主要作用是,在用戶準(zhǔn)備離開該頁面時, 彈出提示, 返回true或者false, 如果為true, 則離開頁面, 如果為false, 則停留在該頁面

引入Prompt組件

import {Prompt } from "react-router-dom";

基本用法1

prompt組件里有一個message屬性,該屬性就是在用戶離開頁面時, 所提示的文字內(nèi)容

 <Prompt message="您確定要離開該頁面嗎?" />

基本用法2

prompt組件中還有一個when屬性, 就是渲染該組件的條件, 應(yīng)該傳入一個布爾值,值為true時,則渲染該組件

 <Prompt message="您確定要離開該頁面嗎?" when={this.state.isOpen} />

基本用法3

prompt組件的message屬性,同時還可以傳入一個方法來接收要傳入的文字, 但是要注意的是, 使用三元運算符操作, 可以向其中直接傳入文字, 但是如果使用if else來做判斷,那么將無法直接向其中傳入文字

 <Prompt
   message = {() => {
   this.state.isOpen? false: "您確定要離開該頁面嗎?"
}}
  />

基本用法3(拓展)

在我的工作項目中,想要實現(xiàn)的一種效果就是, 當(dāng)用戶,在瀏覽大圖時, 按下手機的返回按鈕時, 將大圖遮罩層關(guān)閉,并且保留在當(dāng)前頁面, 而如果用戶沒有點開大圖時,按下了手機的返回按鈕時, 則提示用戶是否離開, 這里通過this.state.isOpen來控制大圖預(yù)覽遮罩層的顯示和隱藏, 上面說過, if else判斷無法向組價中直接傳入文字內(nèi)容, 但是幸好, message能夠接收一個方法, 而這個方法, 最終只需要返回一個true或者false就可以, 不管中間你寫什么樣的代碼都無所謂

<Prompt
   message = {(location)=>{
     if(!this.state.open) {
       let leave = window.confirm("您確定要離開該頁面嗎?")          
       if(!leave) {
         return false
       }          
     }else {
       this.setState({
       open: false
     })
     return false
     }
   }}
  />

在上面的代碼中, 我在message中傳入了一個函數(shù) , 首先是判斷大圖預(yù)覽有沒有被打開, 如果沒有打開, 則通過調(diào)用window.confirm的方法, 設(shè)置網(wǎng)頁的彈出層,如果用戶點擊取消, 則返回false

補充：React-Router <Prompt> 的使用

Prompt 文檔
 Prompt 示例

使用場景：在離開頁面之前，需要判斷當(dāng)前編輯的內(nèi)容是否已經(jīng)保存，如果沒保存，則彈出提示框，提示用戶保存。

查看 API 文檔

【總結(jié)】：Prompt 有兩個屬性：message-當(dāng)用戶離開頁面時給出的提示信息，when-是否渲染，設(shè)置為 true 時，離開頁面時總會渲染，設(shè)置為 false 時，離開頁面時不會渲染。我們就可以利用when設(shè)置渲染的時機，當(dāng)用戶對頁面內(nèi)容進(jìn)行編輯，且未保存時離開，設(shè)置when=true，其他情況設(shè)置when=false。

代碼

import { Button, Form, Input, Modal } from "antd";
import { useState } from "react";
import { Prompt, useHistory } from "react-router-dom";

export default function PromptDemo() {
  const history = useHistory();
  const [form] = Form.useForm();
  const [isPrompt, setPrompt] = useState(false);

  const handlePrompt = () => {
    if (!isPrompt) {
      return true;
    }
    Modal.confirm({
      title: "未保存",
      content: "當(dāng)前內(nèi)容未保存，確認(rèn)退出嗎？",
      onOk: () => {
        setPrompt(false);
        history.goBack();
      }
    });
    return false;
  };

  const onFinish = (values: any) => {
    setPrompt(false);
    console.log(values);
  };
  return (
    <div style={{ width: "300px", padding: "40px" }}>
      <Prompt when={isPrompt} message={handlePrompt} />
      <Form form={form} labelCol={{ span: 6 }} onFinish={onFinish}>
        <Form.Item label="姓名" name="name">
          <Input onChange={() => setPrompt(true)} />
        </Form.Item>
        <Form.Item label="手機號" name="mobile">
          <Input onChange={() => setPrompt(true)} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button
            htmlType="button"
            style={{ marginLeft: "24px" }}
            onClick={() => history.goBack()}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}

到此這篇關(guān)于關(guān)于react-router中的Prompt組件使用心得的文章就介紹到這了,更多相關(guān)react router中Prompt組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: