当前位置: 首页 > news >正文

React modal暴露ref简洁使用

  • 父组件使用
import { useRef } from 'react'
import { FormModal } from './modal'const IndexRoute = () => {const formRef = useRef<any>()const openModal = (row?: any) => {const params = {title: row?.id ? `【${row.name}】编辑` : '创建',isView: false,row,api: row?.id ?  editXXX : createXXX,refreshList: () => proTableProps.actionRef.current?.reload()}formRef.current?.acceptParams(params)}return (<><Button onClick={openModal}>open modal</Button><FormModal ref={formRef} />others page content</>)
}export default IndexRoute
  • 子组件
import { Icons } from '@/components/antd-icons'
import { Button, Form, Input, message, Modal, Upload } from 'antd'
import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'export const FormModal = forwardRef((props: any, ref) => {const [form] = Form.useForm()const [confirmloading, setConfirmloading] = useState<boolean>(false)const [visible, setVisible] = useState(false)const [modalProps, setModalProps] = useState<any>({isView: false,title: '',row: {},api: () => {}})const { isView, title, row, api, refreshList } = modalPropsconst onCancel = () => {setConfirmloading(false)form.resetFields()setVisible(false)}const acceptParams = (params: any) => {setModalProps(params)setVisible(true)params.row ? form.setFieldsValue({ ...params.row }) : form.resetFields()}const onOk = async () => {form.validateFields().then(async formValue => {setConfirmloading(true)const res = await api({ ...formValue, id: row?.id })if (res) {message.success(`操作成功`)onCancel()refreshList()}setConfirmloading(false)})}useImperativeHandle(ref,() => ({acceptParams}),[])useEffect(() => {row && Object.keys(row)?.length > 0? form.setFieldsValue({ ...row }): form.resetFields()}, [row])const normFile = (e: { fileList: any }) => {if (Array.isArray(e)) {return e}return e && e.fileList}return (<ModalforceRendertitle={title}open={visible}onOk={onOk}onCancel={onCancel}confirmLoading={confirmloading}destroyOnClose={true}><Formform={form}disabled={isView}initialValues={row}layout="horizontal"labelCol={{ span: 4 }}size="small"><Form.Itemlabel="名称"name="name"rules={[{ required: true, message: '请输入版本名称!' }]}><Input placeholder="name" /></Form.Item>{/* 文件上传form包裹demo */}<Form.Itemname="calibration_zip"label="附件"valuePropName="fileList"getValueFromEvent={normFile}><Upload maxCount={1} beforeUpload={() => false}><Button size="small" icon={<Icons.UploadOutlined />}>上传</Button></Upload></Form.Item></Form></Modal>)
})

相关文章:

React modal暴露ref简洁使用

父组件使用 import { useRef } from react import { FormModal } from ./modalconst IndexRoute () > {const formRef useRef<any>()const openModal (row?: any) > {const params {title: row?.id ? 【${row.name}】编辑 : 创建,isView: false,row,api: r…...

小米路由器ax1500+DDNS+公网IP+花生壳实现远程访问

有远程办公的需求&#xff0c;以及一些其他东西。 为什么写&#xff1f; ax1500路由器好像没搜到相关信息。以及其中有一点坑。 前置 公网ip Xiaomi路由器 AX1500 MiWiFi 稳定版 1.0.54 实现流程 花生壳申请壳域名https://console.hsk.oray.com/ 这里需要为域名实名认证 …...

毕设分享 大数据用户画像分析系统(源码分享)

文章目录 0 前言2 用户画像分析概述2.1 用户画像构建的相关技术2.2 标签体系2.3 标签优先级 3 实站 - 百货商场用户画像描述与价值分析3.1 数据格式3.2 数据预处理3.3 会员年龄构成3.4 订单占比 消费画像3.5 季度偏好画像3.6 会员用户画像与特征3.6.1 构建会员用户业务特征标签…...

使用 Redis 实现分布式锁:原理、实现与优化

在分布式系统中&#xff0c;分布式锁是确保多个进程或线程在同一时间内对共享资源进行互斥访问的重要机制。Redis 作为一个高性能的内存数据库&#xff0c;提供了多种实现分布式锁的方式。本文将详细介绍如何使用 Redis 实现分布式锁&#xff0c;包括基本原理、实现方法、示例代…...

Android常用C++特性之std::make_pair

声明&#xff1a;本文内容生成自ChatGPT&#xff0c;目的是为方便大家了解学习作为引用到作者的其他文章中。 std::make_pair 是 C 标准库中的一个函数模板&#xff0c;用于创建一个 std::pair 对象。std::pair 是一种可以存储两个不同类型值的简单数据结构&#xff0c;类似于二…...

Kafka-参数详解

一、上下文 从《Kafka-初识》中可以看到运行kafka-console-producer和 kafka-console-consumer来生产和消费数据时会打印很多参数&#xff0c;这些参数给我们应对多种场景提供了遍历&#xff0c;除了producer和consumer的提供了参数外&#xff0c;Kafka服务器集群中的broker也…...

Docker Overlay2 空间优化

目录 分析优化数据路径规划日志大小限制overlay2 大小限制清理冗余数据 总结 分析 overlay2 目录占用磁盘空间较大的原因通常与 Docker 容器和镜像的存储机制以及它们的长期累积相关&#xff0c;其实我之前在 Docker 原理那里已经提到过了。 通常时以下几种原因导致&#xff…...

第 3 章:使用 Vue 脚手架

1. 初始化脚手架 1.1 说明 Vue 脚手架是 Vue 官方提供的标准化开发工具&#xff08;开发平台&#xff09;。最新的版本是 5.x。文档: https://cli.vuejs.org/zh/ 1.2 具体步骤 第一步&#xff08;仅第一次执行&#xff09;&#xff1a;全局安装vue/cli。 npm install -g vu…...

Spring 循环依赖详解:问题分析与三级缓存解决方案

在Spring框架中&#xff0c;循环依赖&#xff08;Circular Dependency&#xff09;是指多个Bean相互依赖&#xff0c;形成一个循环引用。例如&#xff0c;Bean A依赖于Bean B&#xff0c;而Bean B又依赖于Bean A。这种情况在Bean创建时可能导致Spring容器无法正常完成初始化&am…...

爬虫prc技术----小红书爬取解决xs

知识星球&#xff1a;知识星球 | 深度连接铁杆粉丝&#xff0c;运营高品质社群&#xff0c;知识变现的工具知识星球是创作者连接铁杆粉丝&#xff0c;实现知识变现的工具。任何从事创作或艺术的人&#xff0c;例如艺术家、工匠、教师、学术研究、科普等&#xff0c;只要能获得一…...

uni-app之旅-day06-加入购物车

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言8.0 创建 cart 分支8.1 配置 vuex8.2 创建购物车的 store 模块8.3 在商品详情页中使用 Store 中的数据8.4 实现加入购物车的功能8.5 动态统计购物车中商品的总数…...

【Kubernetes】常见面试题汇总(五十六)

目录 123. pod 创建失败&#xff1f; 124. kube-flannel-ds-amd64-ndsf7 插件 pod 的 status 为 Init:0/1 &#xff1f; 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#x…...

LabVIEW激光诱导击穿光谱识别与分析系统

LabVIEW激光诱导击穿光谱&#xff08;LIBS&#xff09;分析系统利用高能量脉冲激光产生高温等离子体&#xff0c;通过分析等离子体发出的光谱来定性分析样品中的元素种类。该系统的开发集成了软件与硬件的设计&#xff0c;实现了自动识别和定性分析功能&#xff0c;适用于环境监…...

Redis的基础篇

Redis的基础篇 1.在CentOs7上安装Redis&#xff08;最好不要在windows上装&#xff0c;版本少&#xff09; 1.安装gcc --> yum install gcc tcl(可能会报错&#xff0c;重新安装yum就行了) 2.下载redis --> 最好是6.2上的版本 3.解压redis --> tar -zxvf redis-6.2.…...

java和python哪个好

Java和Python各有优缺点&#xff0c;适合不同的应用场景&#xff0c;具体看你需要在哪种情况下使用编程语言。以下是Java和Python的一些对比&#xff0c;帮助你决定哪种更适合你的需求&#xff1a; 性能 Java&#xff1a;编译型语言&#xff0c;编译成字节码运行在Java虚拟机&…...

Electron + ts + vue3 + vite

正常搭建脚手架&#xff1a;npm create vitelatest 项目名称 安装electron的相关依赖&#xff1a;注&#xff1a;安装时终端url要项目名那一层 安装npm install electron -D安装打包工具&#xff1a;npm install electron-builder -D开发工具&#xff1a;npm install electron-…...

《大规模语言模型从理论到实践》第一轮学习--分布式训练

基础知识 5分钟看懂电脑硬件配置 - 知乎 (zhihu.com) 显存 定义&#xff1a;显存是显卡上的专用高速缓存&#xff0c;用于存储图形处理器&#xff08;GPU&#xff09;在处理图像和视频数据时所需的临时数据。 功能&#xff1a;显存的主要作用是提供GPU快速访问的数据存储&a…...

多模态智能

研究背景&#xff1a; 深度学习从1.0的端到端走向2.0的预训练&#xff0c;通过大规模预训练来记忆多模态数据中共性知识&#xff0c;增强对下游任务的学习能力。 深度学习1.0&#xff1a;特定任务有标注训练数据->随机初始化训练->最终模型 深度学习2.0&#xff1a;大规…...

【机器学习(十三)】机器学习回归案例之股票价格预测分析—Sentosa_DSML社区版

文章目录 一、背景描述二、Python代码和Sentosa_DSML社区版算法实现对比(一) 数据读入(二) 特征工程(三) 样本分区(四) 模型训练和评估(五) 模型可视化 三、总结 一、背景描述 股票价格是一种不稳定的时间序列,受多种因素的影响。影响股市的外部因素很多,主要有经济因素、政治因…...

大模型微调

概述 什么是模型微调&#xff1f; 模型微调是通过微调工具&#xff0c;使用独特的场景数据对平台的基础模型进行调整&#xff0c;帮助你快速定制一个更符合业务需求的大型模型。其优势在于对基础模型进行小幅调整以满足特定需求&#xff0c;相比于训练一个新模型&#xff0c;…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

uniapp 小程序 学习(一)

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

rm视觉学习1-自瞄部分

首先先感谢中南大学的开源&#xff0c;提供了很全面的思路&#xff0c;减少了很多基础性的开发研究 我看的阅读的是中南大学FYT战队开源视觉代码 链接&#xff1a;https://github.com/CSU-FYT-Vision/FYT2024_vision.git 1.框架&#xff1a; 代码框架结构&#xff1a;readme有…...

基于Java项目的Karate API测试

Karate 实现了可以只编写Feature 文件进行测试,但是对于熟悉Java语言的开发或是测试人员,可以通过编程方式集成 Karate 丰富的自动化和数据断言功能。 本篇快速介绍在Java Maven项目中编写和运行测试的示例。 创建Maven项目 最简单的创建项目的方式就是创建一个目录,里面…...

解决MybatisPlus使用Druid1.2.11连接池查询PG数据库报Merge sql error的一种办法

目录 前言 一、问题重现 1、环境说明 2、重现步骤 3、错误信息 二、关于LATERAL 1、Lateral作用场景 2、在四至场景中使用 三、问题解决之道 1、源码追踪 2、关闭sql合并 3、改写处理SQL 四、总结 前言 在博客&#xff1a;【写在创作纪念日】基于SpringBoot和PostG…...