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

react 子组件暴露,父组件接收

// Child.jsx
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import { Form, Input } from 'antd';const Child = forwardRef((props, ref) => {const [form] = Form.useForm();const [customState, setCustomState] = useState('默认值');useImperativeHandle(ref, () => ({async getData() {const formValues = await form.validateFields();return {...formValues,customState,};}}));return (<div style={{ border: '1px solid #aaa', padding: 10, marginBottom: 10 }}><Form form={form}><Form.Item name="name" label="名称" rules={[{ required: true }]}><Input /></Form.Item></Form><div><label>其他状态:</label><Inputvalue={customState}onChange={(e) => setCustomState(e.target.value)}/></div></div>);
});export default Child;

父组件如何接收

 

// Parent.jsx
import React, { useRef } from 'react';
import { Button, message } from 'antd';
import Child from './Child';export default function Parent() {const childRef1 = useRef();const childRef2 = useRef();const handleSave = async () => {try {const data1 = await childRef1.current.getData();const data2 = await childRef2.current.getData();console.log('统一收集到的数据:', {child1: data1,child2: data2});message.success('保存成功');} catch (err) {message.error('有数据校验不通过');}};return (<div style={{ padding: 20 }}><Child ref={childRef1} /><Child ref={childRef2} /><Button type="primary" onClick={handleSave}>保存</Button></div>);
}

相关文章:

react 子组件暴露,父组件接收

// Child.jsx import React, { forwardRef, useImperativeHandle, useState } from react; import { Form, Input } from antd;const Child forwardRef((props, ref) > {const [form] Form.useForm();const [customState, setCustomState] useState(默认值);useImperativ…...

如何在Spring Boot中配置自定义端口运行应用程序

Spring Boot 应用程序默认在端口 8080 上运行嵌入式 Web 服务器&#xff08;如 Tomcat、Jetty 或 Undertow&#xff09;。然而&#xff0c;在开发、测试或生产环境中&#xff0c;开发者可能需要将应用程序配置为在自定义端口上运行&#xff0c;例如避免端口冲突、适配微服务架构…...

5.第五章:数据分类的方法论

文章目录 5.1 传统分类方法5.1.1 基于规则的分类方法5.1.2 基于统计的分类方法5.1.3 传统分类方法的局限性 5.2 现代分类技术5.2.1 神经网络分类模型5.2.2 深度学习分类方法5.2.3 现代分类技术的优势 5.3 创新分类方法5.3.1 小样本学习方法5.3.2 零样本学习方法5.3.3 主动学习方…...

如何在 Unity 中导入 gltf /glb 文件

遗憾的是&#xff0c;默认情况下&#xff0c;Unity 无法导入 gltf 文件。 我们有 个好消息要告诉你 gltf&#xff0c;有一种方法可以将 glb 文件格式导入 Unity&#xff01; 看完这篇文章后&#xff0c;让我们将 “gltf&#xff0c; glb” 文件放入 Unity 中&#xff0c;并将其…...

Docker部署一款开源的极简服务器监控工具Ward内网穿透远程使用

文章目录 前言1.关于Ward2.Docker部署3.简单使用ward4.安装cpolar内网穿透5. 配置ward公网地址6. 配置固定公网地址总结 前言 各位小伙伴们&#xff0c;你们是不是也遇到过这样的情况&#xff1a;每次打开服务器管理界面&#xff0c;密密麻麻的数据和图表看得你眼花缭乱&#…...

Day11(回溯法)——LeetCode79.单词搜索

1 前言 今天主要刷了一道热题榜中回溯法的题&#xff0c;现在的计划是先刷热题榜专题吧&#xff0c;感觉还是这样见效比较快。因此本文主要介绍LeetCode79。 2 LeetCode79.单词搜索(LeetCode79) OK题目描述及相关示例如下&#xff1a; 2.1 题目分析解决及优化 感觉回溯的方…...

数据结构-图

一、图的定义与基本术语 图&#xff08;Graph&#xff09;是一种非线性数据结构&#xff0c;由顶点&#xff08;Vertex&#xff09;和边&#xff08;Edge&#xff09;组成。它包含以下基本术语&#xff1a; 顶点&#xff08;Vertex&#xff09; &#xff1a;是图中的数据元素。…...

数据结构-选择排序(Python)

目录 选择排序算法思想 选择排序算法步骤 选择排序代码实现 选择排序算法分析 选择排序算法思想 选择排序&#xff08;Selection Sort&#xff09;基本思想&#xff1a; 将数组分为两个区间&#xff1a;左侧为已排序区间&#xff0c;右侧为未排序区间。每趟从未排序区间中…...

[特殊字符] 分布式定时任务调度实战:XXL-JOB工作原理与路由策略详解

在微服务架构中&#xff0c;定时任务往往面临多实例重复执行、任务冲突等挑战。为了解决这一问题&#xff0c;企业级调度框架 XXL-JOB 提供了强大的任务统一调度与执行机制&#xff0c;特别适合在分布式系统中使用。 本文将从 XXL-JOB 的核心架构入手&#xff0c;详细讲解其调…...

【前端】基于 Promise 的 HTTP 客户端工具Axios 详解

Axios 详解 1. 简介 定义&#xff1a;Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;用于浏览器和 Node.js 环境&#xff0c;简化 HTTP 请求的发送和处理。核心特点&#xff1a; 支持 Promise API&#xff0c;可链式调用。自动转换 JSON 数据。支持请求/响应拦截。可取…...

React Native 安卓端 android Image 播放gif webp 动态图

React Native 安卓端 android Image 播放gif webp 动态图 RN项目是0.78.2 React是19.0 基本介绍 Image 是 React Native 中用于显示各种类型图片的核心组件&#xff0c;支持显示网络图片、静态资源、本地图片以及 base64 编码的图片。在 Android 端&#xff0c;Image 组件还可…...

【mysql】windows mysql命令

终端配置环境变量&#xff0c;找到mysql地址放入环境变量-系统变量中 例如&#xff1a; C:\Program Files\MySQL\MySQL Server 8.0\bin win键R输入 sysdm.cpl 快速打开电脑变量-高级-环境变量 连接命令 mysql -u root -p 查看所有数据库 show databases; 选中数据库 …...

uniappx 打包配置32位64位x86安装包

{"app": {"distribute": {"android": {"abiFilters": ["armeabi-v7a","arm64-v8a","x86","x86_64"]}}} }...

【C++ 类和数据抽象】static 类成员

目录 一、static 类成员的基本概念 1.1 静态成员的定义 1.2 静态数据成员 1.3 静态成员函数 1.4 内存布局 1.5 访问控制 1.6 性能分析 1.7 C标准演进 二、static 类成员的特点 2.1 共享性 2.2 不依赖于对象 2.3 无 this 指针 三、静态成员的初始化规则 3.1 初始化…...

深入了解递归、堆与栈:C#中的内存管理与函数调用

在编程中&#xff0c;理解如何有效地管理内存以及如何控制程序的执行流程是每个开发者必须掌握的基本概念。C#作为一种高级编程语言&#xff0c;其内存管理和函数调用机制包括递归、堆与栈。本文将详细讲解这三者的工作原理、用途以及它们在C#中的实现和应用。 1. 递归 (Recur…...

声音分离人声和配乐-从头设计数字生命第5课, demucs——仙盟创梦IDE

demucs 伴奏提取人声分离技术具有多方面的重大意义&#xff0c;主要体现在以下几个领域&#xff1a; 音乐创作与制作 创作便利性提升&#xff1a;创作者能轻易获取无伴奏的人声轨道&#xff0c;便于对人声进行单独处理&#xff0c;如调整音准、音色、添加特效等&#xff0c…...

基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案

随着“互联网医疗”政策红利持续释放&#xff0c;互联网医院已成为推动医疗数字化转型的重要方向。在这一趋势下&#xff0c;电子处方功能模块作为核心环节&#xff0c;不仅直接关系到线上问诊闭环的实现&#xff0c;也成为系统开发中技术难度较高、业务逻辑最为复杂的一部分。…...

Linux 基础命令入门指南

在 Linux 系统中&#xff0c;命令行是高效操作和管理系统的核心方式。掌握一些基础命令&#xff0c;能够让我们更便捷地完成文件操作、系统监控、文本处理等任务。本文将为大家介绍常用的 Linux 基础命令&#xff0c;帮助新手快速入门。 一、文件和目录操作命令 1. ls&#x…...

(done) 吴恩达版提示词工程 3. 迭代 (控制输出长度、提取特定细节、输出 HTML 格式)

url: https://www.bilibili.com/video/BV1Z14y1Z7LJ?spm_id_from333.788.videopod.episodes&vd_source7a1a0bc74158c6993c7355c5490fc600&p3 别人的笔记 url: https://zhuanlan.zhihu.com/p/626966526 3. 迭代&#xff08;Iterative&#xff09; 当我使用大语言模型…...

学员答题pk知识竞赛小程序怎么做

制作学员答题PK知识竞赛小程序&#xff0c;主要有以下步骤&#xff1a; 一、规划设计 明确需求&#xff1a;确定小程序的使用场景是校园知识竞赛、培训机构考核还是企业内部培训等。答题功能&#xff0c;规定答题的具体规则&#xff0c;包括题目类型&#xff08;单选、多选、…...

P1217 [USACO1.5] 回文质数 Prime Palindromes【python】

P1217 [USACO1.5] 回文质数 Prime Palindromes 题目描述 因为 151 151 151 既是一个质数又是一个回文数&#xff08;从左到右和从右到左是看一样的&#xff09;&#xff0c;所以 151 151 151 是回文质数。 写一个程序来找出范围 [ a , b ] ( 5 ≤ a < b ≤ 100 , 000 …...

搭建私人网站

第一章 阿里云服务器选购与配置 1.1 注册与实名认证 ‌注册账号‌ 访问阿里云官网&#xff0c;点击右上角"免费注册"&#xff0c;填写邮箱/手机号&#xff0c;完成人机验证后获取验证码。 注意&#xff1a;企业用户需选择"企业实名认证"&#xff0c;个人用…...

Nacos简介—1.Nacos使用简介

大纲 1.Nacos的在服务注册中心 配置中心中的应用 2.Nacos 2.x最新版本下载与目录结构 3.Nacos 2.x的数据库存储与日志存储 4.Nacos 2.x服务端的startup.sh启动脚本 5.Dubbo Nacos微服务RPC调用开发示例 6.Nacos对临时与持久化服务实例的健康检查机制 7.Nacos保护阈值机…...

【工具】使用 MCP Inspector 调试服务的完全指南

Model Context Protocol (MCP) Inspector 是一个交互式开发工具&#xff0c;专为测试和调试 MCP 服务器而设计。本文将详细介绍如何使用 Inspector 工具有效地调试和测试 MCP 服务。 1. MCP Inspector 简介 MCP Inspector 提供了直观的界面&#xff0c;让开发者能够&#xff…...

架构-项目管理

一、盈亏平衡分析 核心知识点&#xff1a; 基本公式 正常情况&#xff1a;销售额 固定成本 可变成本 税费 利润盈亏平衡时&#xff1a;销售额 固定成本 可变成本 税费&#xff08;利润为0&#xff0c;即不赚不亏的临界点&#xff09; 公式推导&#xff1a;利润 销售额…...

域控重命名导致无法登录

问题描述&#xff1a;公司新买了一个服务器用于替换旧服务器&#xff0c;旧服务器名称为server3为域控&#xff0c;降级后新装的服务器升级为了新域控。然后旧服务器更名为server5&#xff0c;新服务器server6更名为server3.重启新服务器后服务器无法登录。但是服务器相关功能都…...

C++内存管理那些事

一、C/C内存分布 【说明】&#xff1a; 栈又叫堆栈&#xff0c;是非静态局部变量、函数参数、返回值存放的区域&#xff0c;栈向下增长内存映射段是高效的IO映射方式&#xff0c;用于装载一个共享的动态内存库。用户可以使用系统接口创建共享内存&#xff0c;做进程间的通信堆…...

C++多态(实现部分)(一)

目录 1.多态的概念 1.1运行时多态 1.2 编译时多态 2.多态的定义以及实现 2.1 多态构成的条件 2.2 虚函数 2.3 虚函数的重写/覆盖 2.3.1 虚函数重写的两个例外 1.协变 2.析构函数的重写 2.4 override 和final关键字 2.5 重载/重写/隐藏的对比 ​编辑 3. 抽象类 和…...

HOW - Code Review 流程自动化

文章目录 前言流程自动化落地一、自动发起 MR&#xff08;Merge Request&#xff09;macOS 安装 glab方式一&#xff1a;使用 Homebrew&#xff08;推荐&#xff09; 其他平台安装方法Linux (apt)Windows&#xff08;scoop 或 chocolatey&#xff09; 使用示例&#xff1a;自动…...

自动化标注软件解析

关于PyQt5信号槽机制的解析 信号槽机制是 Qt 框架中用于对象间通信的核心机制&#xff0c;它基于发布-订阅模式&#xff0c;能够实现松耦合的组件交互。 1. 信号槽机制的基本概念 信号&#xff08;Signal&#xff09; 信号是对象发出的一种通知&#xff0c;表示某个事件发生…...

机器人结构认知与安装

机器人结构认知与安装 1. ES机器人系统结构与硬件组成 核心组件&#xff1a; OPPO ES5机器人系统由机器人本体、控制手柄、48V电源和OPPO Studio终端构成。一体化底座&#xff1a;包含控制主板、安全接口板、监测保护电路单元&#xff0c;支持外接急停开关&#xff0c;采用光耦…...

SQLMesh 模型选择指南:优化大型项目的模型更新

在处理大型 SQLMesh 项目时&#xff0c;模型之间的依赖关系可能会变得非常复杂。为了更有效地管理这些项目&#xff0c;SQLMesh 提供了一种模型选择机制&#xff0c;允许用户有针对性地选择需要更新的模型。本文将详细介绍如何使用 SQLMesh 的模型选择功能来优化项目更新过程。…...

linux:启动后,ubuntu屏幕变成红色了

屏幕启动后变成 红色背景 通常说明 显卡驱动出了问题&#xff0c;或者是 图形界面加载失败 使用了 fallback 模式。这种现象在 NVIDIA 驱动安装失败或显卡与驱动不兼容时常见。 &#x1f3af; 先给你几个快速修复选项 ✅ 1. 进入 TTY 命令行界面 按下&#xff1a;Ctrl Alt …...

抖音的逆向工程获取弹幕(websocket和protobuf解析)

目录 声明前言第一节 获取room_id和ttwid值第二节 signture值逆向python 实现signature第三节 Websocket实现长链接请求protubuf反序列化pushFrame反序列化Response解压和反序列化消息体Message解析应答ack参考博客声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的…...

2194出差-节点开销Bellman-ford/图论

题目网址&#xff1a; 蓝桥账户中心 我先用Floyd跑了一遍&#xff0c;不出所料TLE了 n,mmap(int,input().split())clist(map(int,input().split()))INFfloat(inf) ma[[INF]*n for i in range(n)]for i in range(m):u,v,wmap(int,input().split())ma[u-1][v-1]wma[v-1][u-1]w#“…...

【hexo主题自定义】

主题下载安装 进入命令行&#xff0c;下载 NexT 主题&#xff0c;输入&#xff1a; git clone https://github.com/theme-next/hexo-theme-next themes/next 修改站点配置文件_config.yml&#xff0c;找到如下代码&#xff1a; ## Themes: https://hexo.io/themes/ theme: l…...

前后端部署

#在学习JavaWeb之后&#xff0c;进行了苍穹外卖的学习。在进行苍穹外卖的部署的时候&#xff0c;作者遇到了下面的问题# 1.前端工程nginx无法启动&#xff1a; 当我双击已经部署好的nginx工程中nginx.exe文件的时候&#xff0c;在服务中&#xff0c;并没有找到ngnix成功运行。…...

1.jdk+idea安装+HelloWorld项目创建

1.jdk1.8idea安装项目创建 jdk1.8安装配置环境变量 到华为镜像下载jdk,因为Oracle官网需要注册才可以下载jdk https://repo.huaweicloud.com/java/jdk/8u202-b08/ 直接下一步安装&#xff0c;配置环境变量 重启&#xff0c;执行java -version 和 javac idea下载 版本20…...

Puter部署指南:基于Docker的多功能个人云平台掌控自己的数据

前言&#xff1a;嗨&#xff0c;小伙伴们&#xff01;每次开机是不是都要像参加点击大赛一样不停地敲击各种网盘和应用的登录按钮&#xff1f;更让人抓狂的是&#xff0c;这些科技巨头会不会偷偷翻阅我们的隐私数据呢&#xff1f;别担心&#xff0c;今天给大家安利一个超炫酷的…...

动态渲染页面智能嗅探:机器学习判定AJAX加载触发条件

本文提出了一种基于机器学习的智能嗅探机制&#xff0c;革新性地应用于自动判定动态渲染页面中AJAX加载的最佳触发时机。系统架构采用先进模块化拆解设计&#xff0c;由请求分析模块、机器学习判定模块、数据采集模块和文件存储模块四大核心部分构成。在核心代码示例中&#xf…...

探索 CameraCtrl模型:视频生成中的精确摄像机控制技术

在当今的视频生成领域&#xff0c;精确控制摄像机轨迹一直是一个具有挑战性的目标。许多现有的模型在处理摄像机姿态时往往忽略了精准控制的重要性&#xff0c;导致生成的视频在摄像机运动方面不够理想。为了解决这一问题&#xff0c;一种名为 CameraCtrl 的创新文本到视频模型…...

理解欧拉公式

1. 欧拉公式中的符号 欧拉公式 e i x cos ⁡ x i sin ⁡ x e^{ix}\cos xi\sin x eixcosxisinx当 x π x \pi xπ时 e i π 1 0 / / 欧拉恒等式 e^{i\:\pi}10 //欧拉恒等式 eiπ10//欧拉恒等式 e e e:自然对数的底 i i i:虚数&#xff0c; i 2 − 1 i^2 -1 i2−1 cos…...

7.9 Python+Click实战:5步打造高效的GitHub监控CLI工具

Python+Click实战:5步打造高效的GitHub监控CLI工具 GitHub Sentinel Agent 命令行界面开发实战 关键词:CLI 开发实践、Click 框架、API 集成、命令行参数解析、错误处理机制 1. 命令行界面技术选型与架构设计 GitHub Sentinel 采用 Click + Requests 技术栈构建 CLI 工具,…...

leetcode28. 找出字符串中第一个匹配项的下标_简单KMP

28. 找出字符串中第一个匹配项的下标 - 力扣&#xff08;LeetCode&#xff09; 模仿&#xff1a;algorithm-journey/src/class100/Code01_KMP.java at main algorithmzuo/algorithm-journey GitHub #include <stdio.h> #include <stdlib.h> #include <strin…...

代码随想录算法训练营第二十六天

LeetCode题目: 452. 用最少数量的箭引爆气球435. 无重叠区间763. 划分字母区间2799. 统计完全子数组的数目(每日一题) 其他: 今日总结 往期打卡 452. 用最少数量的箭引爆气球 跳转: 452. 用最少数量的箭引爆气球 学习: 代码随想录公开讲解 问题: 有一些球形气球贴在一堵用 X…...

精益数据分析(20/126):解析经典数据分析框架,助力创业增长

精益数据分析&#xff08;20/126&#xff09;&#xff1a;解析经典数据分析框架&#xff0c;助力创业增长 在创业和数据分析的学习道路上&#xff0c;每一次深入探索都可能为我们带来新的启发。今天&#xff0c;依旧带着和大家共同进步的想法&#xff0c;我们一起深入研读《精…...

基于Django的权限管理平台

目录 单元一&#xff1a;项目准备 任务一&#xff1a;创建项目 1.1配置 DRF 模型 任务二&#xff1a;设置CSRF令牌 2.1创建app包 2.2检查浏览器Cookies权限 2.3获取cookies 单元二&#xff1a;用户平台 任务一&#xff1a;用户数据模型搭建 1.1创建user模块 1.2生成…...

深度解析 LangChain、ReAct、ReROO 架构及其在 AI Agent 中的应用

一、LangChain 架构&#xff1a;模块化智能代理的核心框架 1. 架构特性与设计原理 LangChain 是构建智能代理的模块化框架&#xff0c;其核心通过 Chains&#xff08;任务链&#xff09;、Agents&#xff08;代理&#xff09;、Memory&#xff08;记忆&#xff09; 和 Tools&a…...

数据库day-07

一、实验名称和性质 子查询 验证 设计 二、实验目的 1&#xff0e;掌握子查询的嵌套查询&#xff1b; 2.掌握集合操作 3&#xff0e;了解EXISTS嵌套查询方法&#xff1b; 三、实验的软硬件环境要求 硬件环境要求&#xff1a; PC机(单机) 使用的软件名称、版本号以及模块…...

使用Tauri 2.3.1+Leptos 0.7.8开发桌面小程序汇总

近期断断续续学习了Rust编程&#xff0c;使用Tauri 2.3.1Leptos 0.7.8开发了一个自用的桌面小程序。Win10操作系统&#xff0c;使用VS Code及rust analyzer插件搭建的开发环境&#xff0c;后期开始使用Roo Code绑定DeepSeek API 辅助编程&#xff0c;对我这个初学者编程帮助很大…...