React antd form表单未保存跳转页面提示

需求是:
表单编辑后没保存,跳转其他页面需要提示未保存,保存就继续form的submit,反之就是关闭弹窗,再切换菜单正常跳转路由。

关键代码如下:

const [initialFormValues, setInitialFormValues] = useState({});const initialFormValuesRef = useRef(initialFormValues);const handleGeneralForm = () => {const {avatar = '',tenantName = '',timeZoneId = '',tenantEmail = '',webSite = '',address = '',} = currentUserTenant;form.setFieldsValue({avatar,tenantName,timeZoneId,tenantEmail,webSite,address,});setInitialFormValues(form.getFieldsValue());};useEffect(() => {loadGetAllTimeZone();handleGeneralForm();initialFormValuesRef.current = form.getFieldsValue();}, []);const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);const [blockOpen, setBlockOpen] = useState(false);const deleteAvatar = () => {form.setFieldsValue({avatar: '',icon: '',});setDeleteConfirmOpen(false);};useEffect(() => {const unblock = history.block(({ location, action }) => {if (action === 'PUSH' || action === 'REPLACE') {const pathname = location.pathname;unblock();const isFormChanged = isEqual(form.getFieldsValue(), initialFormValuesRef.current);if (!isFormChanged) {setBlockOpen(true);} else {history.push({pathname: pathname,search: location.search,});}}});return () => {unblock();};}, []);

import { isEqual } from 'lodash';

const isFormChanged = isEqual(form.getFieldsValue(), initialFormValuesRef.current);

这就是个对比

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/47928.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue学习笔记(十)——Vuex(状态管理,组件间共享数据)

1. vuex基础-介绍 1.1 为什么会有Vuex ? 在现代 Web 开发复杂多变的需求驱动之下,组件化开发已然成为了事实上的标准。然而大多数场景下的组件都并不是独立存在的,而是相互协作共同构成了一个复杂的业务功能。 组件间的通信成为了必不可少的开发需求。…

《Linux运维总结:基于ARM64架构CPU使用docker-compose一键离线部署单机版tendis2.4.2》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:《Linux运维篇:Linux系统运维指南》 一、部署背景 由于业务系统的特殊性,我们需要面对不同的客户部署业务系统&#xff0…

Apache Kylin

Apache Kylin 是一个开源的分布式分析引擎,提供 SQL 查询接口及多维分析(OLAP)能力以支持超大规模数据集。它能在亚秒级的时间内提供 PB 级数据的查询能力,非常适合大数据分析和报表系统。 ### 入门指南 #### 1. 环境准备 首先…

数学建模——快递包裹装箱优化问题(2023年长三角数学建模A题问题一、问题二)

快递包裹装箱优化问题 2022 年,中国一年的包 裹已经超过1000 亿件,占据了全球快递事务量的一半以上。近几年,中国每年新增包裹数量相当于美国整个国家一年的包裹数量,十年前中国还是物流成本最昂贵的国家,当前中国已经…

LeetCode题练习与总结:两数之和Ⅱ-输入有序数组--167

一、题目描述 给你一个下标从 1 开始的整数数组 numbers &#xff0c;该数组已按 非递减顺序排列 &#xff0c;请你从数组中找出满足相加之和等于目标数 target 的两个数。如果设这两个数分别是 numbers[index1] 和 numbers[index2] &#xff0c;则 1 < index1 < index…

【IC前端虚拟项目】sanity_case的编写与通包测试

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 在花了大力气完成reference model之后,整个验证环境的搭建就完成了,再多看一下这个结构然后就可以进行sanity_case和通包测试: 关于sanity_case和通包测试我在很多篇文章中说过好多次了在这里就不赘述…

java 中的虚拟机的介绍

Java 虚拟机&#xff08;Java Virtual Machine&#xff0c;简称 JVM&#xff09;是运行 Java 应用程序的核心组件。它提供了一个平台无关的执行环境&#xff0c;使 Java 程序可以在各种硬件和操作系统上运行。以下是 JVM 的详细介绍&#xff1a; 1. JVM 的基本概念 JVM 是一种…

el-menu弹出菜单样式不生效

1. 使用 ruoyi 项目时出现的问题。 <template><el-menu:default-active"activeMenu":collapse"false":unique-opened"true"class"container":collapse-transition"true"mode"horizontal"><sideba…

华为od 100问 持续分享6-入职体检

我是一名软件开发培训机构老师&#xff0c;我的学生已经有上百人通过了华为OD机试&#xff0c;学生们每次考完试&#xff0c;会把题目拿出来一起交流分享。 重要&#xff1a;2024年5月份开始&#xff0c;考的都是OD统一考试&#xff08;D卷&#xff09;&#xff0c;题库已经整…

学习opencv

初步学习可以参考&#xff1a; OpenCV学习之路&#xff08;附加资料分享&#xff09;_opencv资料-CSDN博客 【OpenCV】OpenCV常用函数合集【持续更新】_opencv函数手册-CSDN博客 整体框架可以参考&#xff1a; OpenCV学习指南&#xff1a;从零基础到全面掌握&#xff08;零…

Linux驱动开发-05APP和驱动的交互方式

一、传输数据 APP和驱动: copy_to_usercopy_from_user驱动和硬件: 各个子系统的函数通过ioremap映射寄存器地址后,直接访问寄存器二、APP使用驱动的四种方式 驱动程序:提供能力,不提供策略 非阻塞(查询)(应用程序访问底层驱动时(read、write时),驱动没有数据不等待,…

基于 CNN(二维卷积Conv2D)+LSTM 实现股票多变量时间序列预测(PyTorch版)

前言 系列专栏:【深度学习&#xff1a;算法项目实战】✨︎ 涉及医疗健康、财经金融、商业零售、食品饮料、运动健身、交通运输、环境科学、社交媒体以及文本和图像处理等诸多领域&#xff0c;讨论了各种复杂的深度神经网络思想&#xff0c;如卷积神经网络、循环神经网络、生成对…

PHP 快速入门:构建动态网站的基础

引言 PHP&#xff0c;全称 Hypertext Preprocessor&#xff0c;是一种广泛用于创建动态网站的服务器端脚本语言。它易于学习&#xff0c;功能强大&#xff0c;能够与多种数据库系统&#xff08;如 MySQL&#xff09;集成&#xff0c;是 Web 开发者的常用工具之一。本文将带你快…

单机、集群、分布式服务器比较:

1. 单机服务器的瓶颈&#xff1a; 单机服务器&#xff1a;一台服务器独立运行一个工程所需的全部的业务模块 受限于服务器硬件资源&#xff0c;所承受用户并发量受限&#xff0c;32位linux操作系统最大并发量为两万任一模块的变动和修改&#xff0c;都会导致整个项目代码重新编…

轮播图变成响应式数据

文章目录 &#x1f412;个人主页&#xff1a;信计2102罗铠威&#x1f3c5;Vue项目常用组件模板仓库&#x1f4d6;前言&#xff1a; &#x1f412;个人主页&#xff1a;信计2102罗铠威 &#x1f3c5;Vue项目常用组件模板仓库 &#x1f4d6;前言&#xff1a; 本篇博客主要记录轮…

Android 14 适配之 - 隐式/显示 Intent 和 广播适配

隐式 Intent 对隐式Intent 限制: 对 Android 14(API 级别 34)或更高版本为目标平台的应用,Android 会限制应用向内部应用组件发送隐式 intent: 1. 即隐式 intent 只能发送给导出的组件。在应用必须使用显式 intent 来发送组件,且被发送的组件是未被导出的属性配置。 …

解决ElasticJob项目重启ZooKeeper注册冲突以及zkCli删除目录

解决ElasticJob项目重启ZooKeeper注册冲突以及zkCli删除目录 背景 在现代化的分布式调度系统中&#xff0c;ElasticJob 是一个非常流行的选择。它利用 ZooKeeper 作为注册中心来管理任务分片。然而&#xff0c;有时在项目重启时&#xff0c;会遇到 ZooKeeper 注册冲突的问题&…

Elasticsearch 使用terms对long类型日期统计按月销售

索引mapping&#xff1a; {"properties" : {"_class" : {"type" : "text","fields" : {"keyword" : {"type" : "keyword","ignore_above" : 256}}},"createDate" : {&q…

PHP上门按摩专业版防东郊到家系统源码小程序

&#x1f486;‍♀️【尊享级体验】上门按摩专业版&#xff0c;告别东郊到家&#xff0c;解锁全新放松秘籍&#xff01;&#x1f3e0;✨ &#x1f525;【开篇安利&#xff0c;告别传统束缚】&#x1f525; 亲们&#xff0c;是不是厌倦了忙碌生活中的疲惫感&#xff1f;想要享…

从微软发iPhone,聊聊企业设备管理

今天讲个上周的旧闻&#xff0c;微软给员工免费发iPhone。其实上周就有很多朋友私信问我&#xff0c;在知乎上邀请我回答相关话题&#xff0c;今天就抽点时间和大家一起聊聊这事。我不想讨论太多新闻本身&#xff0c;而是更想聊聊事件的主要原因——微软企业设备管理&#xff0…