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

React hooks子组件暴露方法示例

说明

通常情况下,React 子组件使用父组件的方法或值通过props传递,反过来,父组件如果需要子组件的方法就需要子组件将自己的方法暴露出去。以下是一个实例:

User.tsx

import React, { FC, useEffect, useState, useRef } from 'react';
import { Button, Table } from 'antd';
import UserEdit, { UserEditRef } from './UserEdit';
import { EditFilled } from '@ant-design/icons';interface User {desc?: string;name?: string;
}
const User: FC = () => {const userEditRef = useRef<UserEditRef>(null);const columns: any = [{title: '名称',dataIndex: 'name',key: 'name',},{title: '描述',dataIndex: 'desc',key: 'desc',},{title: '操作',render: (_: string, record: User) => {return (<EditFilledonClick={(e) => {userEditRef.current?.open(record);}}/>);},},];const [datasource, setDatasource] = useState<User[]>([{desc: 'I am Tom',name: 'Tom',},{desc: 'I am Marry',name: 'Marry',},]);const updateData = (data?: User) => {const datas = [data, ...datasource];setDatasource(datas);};return (<div><ButtononClick={() => {userEditRef.current.open();}}>新建</Button><Table columns={columns} dataSource={datasource} /><UserEdit ref={userEditRef} onSave={updateData} /></div>);
};export default User;

UserEdit.tsx

import { useState, useImperativeHandle, forwardRef } from 'react';
import { Form, Input, Drawer, Button } from 'antd';interface User {userId?: number;desc?: string;name?: string;
}interface PropType {onSave: Function;
}export interface UserEditRef {open: (currentUser?: User) => void;
}const UserEdit = forwardRef<UserEditRef, PropType>((props, ref) => {//propsconst { onSave } = props;// stateconst [userEditOpen, setUserEditOpen] = useState(false);const [currentFormData, setCurrentFormData] = useState<User>();// 暴露给父组件的属性,open是打开抽屉的方法useImperativeHandle(ref, () => ({open: (currentUser?: User) => {setUserEditOpen(true);setCurrentFormData(currentUser);},}));const onCancel = () => {setUserEditOpen(false);};const onFinish = (values: any) => {onSave(values);setUserEditOpen(false);};return (<Drawertitle={currentFormData ? '用户 | ' + currentFormData?.name : '用户 | 新建'}width="auto"open={userEditOpen}footer={null}onClose={onCancel}destroyOnClose><Form initialValues={currentFormData} onFinish={onFinish}><Form.Itemlabel="组名"name="name"rules={[{ required: true, message: '请输入用户名!' }]}><Input /></Form.Item><Form.Item label="描述" name="desc"><Input.TextArea /></Form.Item><Form.Item><Button type="primary" htmlType="submit">提交</Button><ButtonhtmlType="button"onClick={onCancel}style={{ marginLeft: 8 }}>取消</Button></Form.Item></Form></Drawer>);
});export default UserEdit;

效果预览

1、stackblitz预览
2、InsCode预览

相关文章:

React hooks子组件暴露方法示例

说明 通常情况下&#xff0c;React 子组件使用父组件的方法或值通过props传递&#xff0c;反过来&#xff0c;父组件如果需要子组件的方法就需要子组件将自己的方法暴露出去。以下是一个实例&#xff1a; User.tsx import React, { FC, useEffect, useState, useRef } from …...

数据结构:大顶堆、小顶堆

堆是其中一种非常重要且实用的数据结构。堆可以用于实现优先队列&#xff0c;进行堆排序&#xff0c;以及解决各种与查找和排序相关的问题。本文将深入探讨两种常见的堆结构&#xff1a;大顶堆和小顶堆&#xff0c;并通过 C 语言展示如何实现和使用它们。 一、定义 堆是一种完…...

电加热热水器上架亚马逊美国站需要的UL174报告

电加热热水器上架亚马逊美国站需要的UL174报告 家用热水器出口美国需要办理UL174测试报告。 热水器就是指通过各种物理原理&#xff0c;在一定时间内使冷水温度升高变成热水的一种装置。分为制造冷气部分和制造热水部分。其实这两个部分又是紧密地联系在一起&#xff0c;密不可…...

使用visual studio写一个简单的c语言程序

官网下载visual studio&#xff0c;社区版免费的 https://visualstudio.microsoft.com/zh-hans/ 下载好以后选择自己的需求进行安装&#xff0c;我选择了两个&#xff0c;剩下的是默认。 创建文件&#xff1a;...

怎么创建facebook广告

创建Facebook广告的文章应由本人根据自身实际情况书写&#xff0c;以下仅供参考&#xff0c;请您根据自身实际情况撰写。 创建Facebook广告的步骤&#xff1a; 确定目标受众和广告主题&#xff1a;首先需要明确你的目标受众是谁&#xff0c;他们有什么特点&#xff0c;以及你想…...

pdf怎么转成高清图?pdf在线转换器推荐分享

在日常的工作或者学习中&#xff0c;有时候会需要将编辑好的pdf转高清图片&#xff0c;这样更方便我们后续使用&#xff0c;那么怎么将pdf转图片&#xff08;https://www.yasuotu.com/pdftopic&#xff09;还能保持清晰呢&#xff1f;下面介绍一款pdf转换工具&#xff0c;支持p…...

postgresql 查询缓慢原因分析

pg_stat_activity 最近发现系统运行缓慢&#xff0c;查询数据老是超时&#xff0c;于是排查下pg_stat_activity 系统表&#xff0c;看看有没有耗时的查询sql SELECT pid, state, query, query_start, backend_type FROM pg_stat_activity WHERE state active AND query LIK…...

N65总账凭证管理凭证查询(sql)

--核算账簿 select code , name , pk_setofbook from org_setofbook where ( pk_setofbook in ( select pk_setofbook from org_accountingbook where 1 1 and ( pk_group N0001A11000000000037X ) and ( accountenablestate 2 ) ) ) order by code;--核算账簿 select code …...

投资1300万欧元!芬兰正式启动量子旗舰项目

​内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 编辑丨慕一 编译/排版丨卉可 琳梦 深度好文&#xff1a;800字丨8分钟阅读 近日&#xff0c;芬兰研究委员会向新启动的芬兰量子旗舰&#xff08;FQF&#xff09;项目拨款1300万欧元&#xf…...

【3分钟开服】幻兽帕鲁服务器一键部署保姆教程

在帕鲁的世界&#xff0c;你可以选择与神奇的生物「帕鲁」一同享受悠闲的生活&#xff0c;也可以投身于与偷猎者进行生死搏斗的冒险。帕鲁可以进行战斗、繁殖、协助你做农活&#xff0c;也可以为你在工厂工作。你也可以将它们进行售卖&#xff0c;或肢解后食用。 引用自&#x…...

PandaWallet :Web3.0世界的入口

如果说互联网的普及和发展造就了移动支付&#xff0c;那么Web3的到来则书写了加密支付的新篇章&#xff0c;并将加密钱包的发展推向新高潮。 传统电子钱包的功能是储存资产与移动支付。加密钱包在储存资产与移动支付的基础上&#xff0c;增加了身份标识的功能。这也是Web3中用户…...

微软Azure-openAI 测试调用及说明

本文是公司在调研如何集成Azure-openAI时&#xff0c;调试测试用例得出的原文&#xff0c;原文主要基于官方说明文档简要整理实现 本文已假定阅读者申请部署了模型&#xff0c;已获取到所需的密钥和终结点 变量名称值ENDPOINT从 Azure 门户检查资源时&#xff0c;可在“密钥和…...

java 图书管理系统 spring boot项目

java 图书管理系统ssm框架 spring boot项目 功能有管理员模块&#xff1a;图书管理&#xff0c;读者管理&#xff0c;借阅管理&#xff0c;登录&#xff0c;修改密码 读者端&#xff1a;可查看图书信息&#xff0c;借阅记录&#xff0c;登录&#xff0c;修改密码 技术&#…...

Ubuntu系统安装 Redis

环境准备 Ubuntu 系统版本&#xff1a;22.04.3Redis 版本&#xff1a;6.2.12 检查本地 make 环境 make -version若没有安装&#xff0c;则需要安装 sudo apt install make检查本地 gcc 环境 gcc -version若没有安装&#xff0c;则需要安装 sudo apt install gcc。 sudo a…...

简单记录一下如何安装python以及pycharm(图文教程)(可供福建专升本理工类同学使用)

本教程主要给不懂计算机的或者刚刚开始学习python的同学&#xff08;福建专升本理工类&#xff09;&网友学习使用&#xff0c;基础操作&#xff0c;比较详细&#xff0c;其他问题等待补充&#xff01; 安装Python 1.进入python官网&#xff08;https://www.python.org/&a…...

浏览器内存泄漏排查指南

1、setTimeout执行原理 使用setInterval/setTimeOut遇到的坑 - 掘金 2、Chrome自带的Performance工具 当我们怀疑页面发生了内存泄漏的时候&#xff0c;可以先用Performance录制一段时间内页面的内存变化。 点击开始录制执行可能引起内存泄漏的操作点击停止录制 如果录制结束…...

ClickHouse(22)ClickHouse集成HDFS表引擎详细解析

文章目录 HDFS用法实施细节配置可选配置选项及其默认值的列表libhdfs3 支持的ClickHouse 额外的配置限制 Kerberos 支持虚拟列 资料分享系列文章clickhouse系列文章知乎系列文章 HDFS 这个引擎提供了与Apache Hadoop生态系统的集成&#xff0c;允许通过ClickHouse管理HDFS上的…...

idea报错 :(java: 找不到符号)

java: 找不到符号 符号: 变量 adminService 位置: 类 com.example.controller.WebController 查到网上一个办法&#xff1a;因为项目是maven&#xff1a;先点clean在点package...

设计软件最重要的目标是可理解性?

当您设计一款软件时&#xff0c;设计时最重要的一点就是可理解性。安全性、性能和正确性都很重要&#xff0c;但它们次优于可理解性。 被误解的软件会产生Bug缺陷 如果软件的实施者和维护者对软件存在误解&#xff0c;那么软件最终就会出现缺陷。主要缺陷。这些缺陷有多种形式…...

酒店|酒店管理小程序|基于微信小程序的酒店管理系统设计与实现(源码+数据库+文档)

酒店管理小程序目录 目录 基于微信小程序的酒店管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员模块的实现 (1) 用户信息管理 (2) 酒店管理员管理 (3) 房间信息管理 2、小程序序会员模块的实现 &#xff08;1&#xff09;系统首页 &#xff0…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

项目部署到Linux上时遇到的错误(Redis,MySQL,无法正确连接,地址占用问题)

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...