频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
关于react-router中的Prompt组件学习心得
2018-12-07 16:03:05           
收藏   我要投稿
在最近的react项目中, 遇到了一个需求, 点击图片的时候, 会出现一个大图预览, 其实就是一个遮罩层, 专门用来显示大图的, 但因为是一个APP, 所以难免会有用户点开大图后, 不用正常的关闭按钮关闭大图遮罩层, 而是点击手机的返回键,这样就会造成页面后退, 而不仅仅只是关闭遮罩层了, 所以在此, 我决定使用react-router里的Prompt组件

Prompt

组件作用

该组件主要作用是,在用户准备离开该页面时, 弹出提示, 返回true或者false, 如果为true, 则离开页面, 如果为false, 则停留在该页面

引入Prompt组件

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

基本用法1

prompt组件里有一个message属性,该属性就是在用户离开页面时, 所提示的文字内容

基本用法2

prompt组件中还有一个when属性, 就是渲染该组件的条件, 应该传入一个布尔值,值为true时,则渲染该组件

基本用法3

prompt组件的message属性,同时还可以传入一个方法来接收要传入的文字, 但是要注意的是, 使用三元运算符操作, 可以向其中直接传入文字, 但是如果使用if else来做判断,那么将无法直接向其中传入文字

{

this.state.isOpen false: "您确定要离开该页面吗"

}}

/>

基本用法3(拓展)

在我的工作项目中,想要实现的一种效果就是, 当用户,在浏览大图时, 按下手机的返回按钮时, 将大图遮罩层关闭,并且保留在当前页面, 而如果用户没有点开大图时,按下了手机的返回按钮时, 则提示用户是否离开, 这里通过this.state.isOpen来控制大图预览遮罩层的显示和隐藏, 上面说过, if else判断无法向组价中直接传入文字内容, 但是幸好, message能够接收一个方法, 而这个方法, 最终只需要返回一个true或者false就可以, 不管中间你写什么样的代码都无所谓

{

if(!this.state.open) {

let leave = window.confirm("您确定要离开该页面吗")

if(!leave) {

return false

}

}else {

this.setState({

open: false

})

return false

}

}}

/>

在上面的代码中, 我在message中传入了一个函数 , 首先是判断大图预览有没有被打开, 如果没有打开, 则通过调用window.confirm的方法, 设置网页的弹出层,如果用户点击取消, 则返回false

点击复制链接 与好友分享!回本站首页
上一篇:css的基本语句构成
下一篇:JavaScript—常用事件
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站