React使用useImperativeHandle实现父组件触发子组件事件

相关知识:

  1. useImperativeHandle
    在这里插入图片描述
  2. forwardRef
    在这里插入图片描述

相关代码:

获取子组件实例,由于这是函数组件,没有this因此不能整体获取,我们可以通过useImperativeHandle获取想要的变量或者方法。

  1. 父组件
    import React, { useRef } from "react";
    import Child from "./child";
    function Parent(props) {const childRef = useRef();const changeChildText = () => {childRef.current.changeText();};return (<div id="parent" style={{ border: "1px solid #ccc", padding: 10 }}><h1>parent page</h1><button onClick={changeChildText}>通过父组件实现子组件点击事件</button><Child ref={childRef} /></div>);
    }
    export default Parent;
    

    解释:父组件中通过属性ref,想要获取通过childRef这个ref存放子组件实例
    子组件接收这个ref,然后给它身上绑定一些想要属性(也就是useImperativeHandle的第二个参数返回值)

  2. 子组件
    import React, { forwardRef, useImperativeHandle, useState } from "react";export default forwardRef((props, ref) => {const [text, setText] = useState("child page");useImperativeHandle(ref, () => {return {changeText,};});const changeText = () => {setText((prev) => {return prev + "★";});};return (<div id="child" style={{ background: "#f1f1f1", padding: 20 }}><h2>{text} <button onClick={changeText}>改变文本</button></h2></div>);
    });
    

请添加图片描述

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

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

相关文章

【华为云云耀云服务器L实例评测|云原生】自定制轻量化表单Docker快速部署云耀云服务器

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

CSS 浮动布局

浮动的设计初衷 float: left/right/both;浮动是网页布局最古老的方式。 浮动一开始并不是为了网页布局而设计&#xff0c;它的初衷是将一个元素拉到一侧&#xff0c;这样文档流就能够包围它。 常见的用途是文本环绕图片&#xff1a; 浮动元素会被移出正常文档流&#xff0c;…

TypeScript和JavaScript有什么不同?

TypeScript和JavaScript是两种不同的编程语言&#xff0c;它们有以下几点不同之处&#xff1a; 类型系统&#xff1a;TypeScript是JavaScript的超集&#xff0c;它引入了静态类型系统。这意味着在TypeScript中&#xff0c;可以声明变量、函数参数和返回值的类型&#xff0c;并进…

【算法|链表】环形链表Ⅱ

环形链表Ⅱ 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表中的环&#xff0c;评测系统…

无涯教程-JavaScript - COS函数

描述 COS函数返回给定Angular的余弦值。 语法 COS (number)争论 Argument描述Required/OptionalNumber The angle in radians for which you want the cosine.Required Notes 如果Angular以度为单位,则将Angular乘以PI()/180或使用RADIANS函数将Angular转换为弧度 弧度(…

Python 魔法方法

视频版教程 Python3零基础7天入门实战视频教程 Python的魔法方法&#xff0c;也称为特殊方法或双下划线方法&#xff0c;是一种特殊的方法&#xff0c;用于在类中实现一些特殊的功能。这些方法的名称始终以双下划线开头和结尾&#xff0c;例如__init__&#xff0c;repr&#x…

linux拨号上网

在Linux上进行拨号上网通常需要使用PPPoE&#xff08;Point-to-Point Protocol over Ethernet&#xff09;协议&#xff0c;这是一种用于通过以太网连接进行拨号上网的常见协议。以下是在Linux上设置PPPoE连接的一般步骤&#xff1a; 请注意&#xff0c;这些步骤可能会因你使用…

uniapp实现大气质量指标图(app端小程序端均支持,app-nvue不支持画布)

效果图如下&#xff1a; 思路&#xff1a; 1.首先我想到的就是使用图标库echarts或ucharts&#xff0c;可是找了找没有找到类似的。 2.其次我就想用画布来实现这个效果&#xff0c;直接上手。&#xff08;app-vue和小程序均可以实现&#xff0c;但是在app-nvue页面不支持画布…

成绩统计(蓝桥杯)

成绩统计 题目描述 小蓝给学生们组织了一场考试&#xff0c;卷面总分为 100 分&#xff0c;每个学生的得分都是一个 0 到 100 的整数。 如果得分至少是 60 分&#xff0c;则称为及格。如果得分至少为 85 分&#xff0c;则称为优秀。 请计算及格率和优秀率&#xff0c;用百分数…

033:跨域,vue端和 Nignx反向代理的配置详细解析

第033个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使…

Linux调试器-gdb使用

目录 一、gdb的使用 二、查看可执行程序的信息&#xff08;readelf&#xff09; 三、gdb常用的指令 1. 显示源代码&#xff08;list/l&#xff09; 2. 运行程序&#xff08;r或run&#xff09; 3. 在某一行设置断点&#xff08;b指令&#xff09; 4. 显示断点&#xff0…

Logstash介绍

Logstash介绍 Logstash是一个开源数据收集引擎&#xff0c;具有实时管道功能。Logstash可以动态地将来自不同数据源的数据统一起来&#xff0c;并将数据标准化到你所选择的目的地。 集中、转换和存储你的数据 Logstash是一个开源的服务器端数据处理管道&#xff0c;可以同时从多…

0.UML

1.图 1.1类图含义 第一层显示类的名称,如果是抽象类,则就用斜体显示。第二层是类的特性,通常就是字段和属性。第三层是类的操作,通常是方法或行为。注意前面的符号, ,表示public,-,表示private,#,表示protected。 1.2接口图 与类图的区别主要是顶端有<< interface >…

【Flink实战系列】Hash collision on user-specified ID “Kafka Source”

Hash collision on user-specified ID “Kafka Source” 在使用 fromSource 构建 Kafka Source 的时候,遇到下面的报错,下面就走进源码,分析一下原因。 Exception in thread "main" java.lang.IllegalArgumentException: Hash collision on user-specified ID &…

esp32-S3-electric-vehicle-expansion(EVE_V2)硬件分享

一. 简介 本次将给大家分享一个QSPI圆形屏幕DIY的小项目&#xff0c;这是我做的第二个版本的&#xff0c;相较于第一个版本有了比较大的改动(第一版就不放出来了&#xff0c;需要的可以私聊)&#xff0c;可以在上面实现更多的功能&#xff0c;做些更有趣的项目 &#xff0c;也…

淘宝开店装修教程 (2023新版)

一、下载千牛 1. 浏览器打开淘宝 https://www.taobao.com/ 2. 进入 - 千牛卖家中心 3. 进入 - 关于千牛 4. 下载千牛 5. 下载页面 6. 下载安装桌面 二、登录千牛 1. 登录页面 2. 进入 - 千牛工作台 三、pc店铺装修 1. 进入 - pc店铺 2. 进入 - 装修页面 3. 删除没用的模块 从…

SQL优化--分页优化(limit)

在数据量比较大时&#xff0c;如果进行limit分页查询&#xff0c;在查询时&#xff0c;越往后&#xff0c;分页查询效率越低。 通过测试我们会看到&#xff0c;越往后&#xff0c;分页查询效率越低&#xff0c;这就是分页查询的问题所在。 因为&#xff0c;当在进行分页查询时&…

linux内核分析:探究x86

CPU工作模式&#xff1a;执行程序的三种模式 - 知乎 一口气看完45个寄存器 ——x86/x64架构 - 知乎 现代操作系统内存管理到底是分段还是分页&#xff0c;段寄存器还有用吗&#xff1f; - 知乎

springboot压测并发设置/nginx关于限制请求数和连接数

4core/8G springboot压测并发设置 server.tomcat.max-threads800 server.tomcat.accept-count200 允许同时并发达到8002001000 配置等比缩小&#xff0c;并发设置参数等比缩小&#xff0c;同时并发数等比缩小 JVM优化&#xff1a;指定并发GC线程数&#xff0c;docker容器在…

都2023年了你还不学ts (一)

TypeScript基础语法入门 TypeScript究竟是什么&#xff1f; 他主要就是想把JavaScript里面不完美的一些语法来进行一个提升 就像官网中所说的 TypeScript is JavaScript with syntax for types. 例如我们看下面的这段代码 if ("" 0) {console.log(hello) }在Jav…