前端react入门day03-react获取dom与组件通信

(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)

目录

受控表单绑定 

React中获取DOM

组件通信

父传子 

父传子-基础实现

父传子-props说明

父传子 - 特殊的prop children

子传父 

使用状态提升实现兄弟组件通信

使用Context机制跨层级组件通信


受控表单绑定 

概念:使用React组件的状态(useState)控制表单的状态

1. 准备一个React状态值
2. 通过value属性绑定状态,通过onChange属性绑定状态同步的函数
//受控绑定表单
import { useState } from "react"function App() {const[value ,setValue]=useState('')return (<div><input value={value}onChange={(e)=>setValue(e.target.value)}type="text"/></div>);
}export default App;

React中获取DOM

在 React 组件中获取/操作 DOM,需要使用 useRef React Hook钩子函数 ,分为两步:
1. 使用useRef创建 ref 对象,并与 JSX 绑定
2. 在DOM可用时,通过 inputRef. current 拿到 DOM 对象
2
//React获取DOM
import { useRef } from "react"function App() {const inputRef = useRef(null)const showDom=()=>{console.log(inputRef.current)}return (<div><input type="text" ref={inputRef}/><button onClick={showDom}>获取dom</button></div>);
}export default App;

组件通信

概念:组件通信就是 组件之间的数据传递, 根据组件嵌套关系的不同,有不同的通信方法
4

父传子 

父传子-基础实现

实现步骤
1. 父组件传递数据 - 在子组件标签上 绑定属性
2. 子组件接收数据 - 子组件通过 props参数 接收数据

 

//父传子
function Son(props) {return <div>this is son,{props.name}</div>
}function App() {const name = 'this is app name'return (<div><Son name={name} /></div>);
}export default App;

网页显示为:

父传子-props说明

1. props可传递任意的数据
数字、字符串、布尔值、数组、对象、函数、JSX
2. props是只读对象
子组件 只能读取props中的数据 ,不能直接进行修改, 父组件的数据只能由父组件修改

父传子 - 特殊的prop children

场景:当我们把内容嵌套在子组件标签中时,父组件会自动在名为children的prop属性中接收该内容

子传父 

核心思路:在子组件中调用父组件中的函数并传递参数

function Son({onGetSonMsg}) {const sonMsg="this is son msg"return (<div>this is Son<button onClick={()=>onGetSonMsg(sonMsg)}>sendMsg </button></div>)
}function App() {const getMsg=(msg)=>{console.log(msg)}return (<div>this is APP<Son onGetSonMsg={getMsg} /></div>);
}export default App;

使用状态提升实现兄弟组件通信

实现思路:借助“状态提升”机制,通过父组件进行兄弟组件之间的数据传递
1. A组件先通过子传父的方式把数据传给父组件App
2. App拿到数据后通过父传子的方式再传递给B组件

// 1. 通过子传父 A -> App
// 2. 通过父传子 App -> Bimport { useState } from "react"function A ({ onGetAName }) {// Son组件中的数据const name = 'this is A name'return (<div>this is A compnent,<button onClick={() => onGetAName(name)}>send</button></div>)
}function B ({ name }) {return (<div>this is B compnent,{name}</div>)
}function App () {const [name, setName] = useState('')const getAName = (name) => {console.log(name)setName(name)}return (<div>this is App<A onGetAName={getAName} /><B name={name} /></div>)
}export default App

使用Context机制跨层级组件通信

 

实现步骤:
1. 使用createContext方法创建一个上下文对象Ctx
2. 在顶层组件(App)中通过 Ctx.Provider 组件 提供数据
3. 在底层组件(B)中通过 useContext 钩子函数获取消费数据
// App -> A -> Bimport { createContext, useContext } from "react"// 1. createContext方法创建一个上下文对象const MsgContext = createContext()// 2. 在顶层组件 通过Provider组件提供数据// 3. 在底层组件 通过useContext钩子函数使用数据function A () {return (<div>this is A component<B /></div>)
}function B () {const msg = useContext(MsgContext)return (<div>this is B compnent,{msg}</div>)
}function App () {const msg = 'this is app msg'return (<div><MsgContext.Provider value={msg}>this is App<A /></MsgContext.Provider></div>)
}export default App

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

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

相关文章

unity-物体的基本操作笔记

unity-物体的基本操作笔记 公共属性左右移动跳 公共属性 private Rigidbody2D m_body2d;[SerializeField] float m_speed 4.0f;[SerializeField] float m_jumpForce 7.5f;左右移动 // Update is called once per framevoid Update(){float inputX Input.GetAxis("Horiz…

FFmpeg之AVFilter

文章目录 一、概述二、重要结构体2.1、AVFilterGraph2.2、AVFilter2.3、AVFilterContext 三、流程梳理3.1、FFmpeg AVFilter 使用整体流程3.2、过滤器构建流程3.2.1、分配AVFilterGraph3.2.2、创建过滤器源3.2.3、创建接收过滤器3.2.4、生成源和接收过滤器的输入输出3.2.5、通过…

Java开发+Intellij-idea+Maven+工程构建

Java开发Intellij-ideaMaven工程构建 Intellij-idea是一款流行的Java集成开发环境&#xff0c;它支持Maven作为项目管理和构建工具。Maven可以帮助开发者自动下载项目依赖的jar包&#xff0c;执行编译、测试、打包等生命周期任务。本资源将介绍如何在Intellij-idea中创建、导入…

MIT 6s081 lab 2:system calls

Lab2 : system calls 作业地址&#xff1a;Lab: System calls (mit.edu) Add $U/_trace to UPROGS in Makefileadd a prototype for the system call to user/user.h, a stub to user/usys.pl, and a syscall number to kernel/syscall.h. The Makefile invokes the perl scr…

2024年1月上旬值得一读的技术文档精选

2024年1月上旬值得一读的技术文档精选 2024.1.15版权声明&#xff1a;本文为博主chszs的原创文章&#xff0c;未经博主允许不得转载。 1、RISC-V开放架构设计之道(v1.0.0) 2023 年 12 月 13 日发布的一本开源书&#xff0c;这本恰逢其时的书简明扼要地介绍了简洁、免费、开放…

力扣刷题第一天 删除排序链表中的重复元素 II

各位小伙伴们好&#xff0c;2024年到来了&#xff0c;我突然发现我好像错过了很多&#xff0c;我的才华和能力远不足以支撑我的梦想&#xff0c;我下定决心要开始为自己努力了&#xff01;希望明天的我是一个更好的我&#xff01;希望小伙伴都有一个美好的明天哦&#xff01; 示…

chrome 307状态码

问题&#xff1a;不知道什么原因导致http请求chrome始终307跳转到https,这个307的跳转非常恶心的地方是客户端缓存行为&#xff0c;并且非普通的f12下面清除缓存可以去掉 解决办法&#xff1a;使用chrome的清除浏览数据&#xff0c;通过这个方式清除&#xff0c;才能解决。 问…

精品基于Uniapp+springboot车辆充电桩缴费管理系统管理系统App-地图

《[含文档PPT源码等]精品基于Uniappspringboot充电桩管理系统App》该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功&#xff01; 软件开发环境及开发工具&#xff1a; 开发语言&#xff1a;Java 后台框架&#xff1a;springboot、ssm 安…

element + table 每两行对比相同值列合并

在开始之前先要明确几个概念&#xff1a; 保持不变&#xff1a;{ rowspan: 1, colspan: 1 } 删除一个单元格&#xff1a;{ rowspan: 0, colspan: 0 } 合并一个单元格&#xff1a;{ rowspan: 2, colspan: 1 } <template><div><el-table:data"tableData&quo…

Appium 自动化测试

1.Appium介绍 1&#xff0c;appium是开源的移动端自动化测试框架&#xff1b; 2&#xff0c;appium可以测试原生的、混合的、以及移动端的web项目&#xff1b; 3&#xff0c;appium可以测试ios&#xff0c;android应用&#xff08;当然了&#xff0c;还有firefoxos&#xff09;…

web自动化实现登录的几种方式

目录 前言 一、pythonunittest框架实现登录功能 二、pythonselenium实现登录功能 三、pythonrequests库实现登录功能 前言 今天主要想介绍python语言不同的自动化测试框架的结合方式来模拟登录功能。想了解自动化测试框架的同学不要错过哦&#xff01; 一、pythonunittest框…

Windows 下 QT开发环境的搭建:

下载QT:Index of /archive/qt/5.14 下载Cmake :CMake - Upgrade Your Software Build System (1)QT在windows,C, 打包exe&#xff1a; step1:window上安装QT软件&#xff1a; Windows下的QT系统开发环境搭建_qt windows-CSDN博客. step2:新建一个界面工程&#xff1a; (1)打…

【css】渐变效果

css渐变效果 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。 用它代替图片&#xff0c;可以加快页面的载入时间、减小带宽占用。同时&#xff0c;因为渐变是由浏览器直接生成的&#xff0c;它在页面缩放时的效果比图片更好&#xff0c;因此你可以更加灵活、便捷的调整页…

postgresql16 物理复制与逻辑复制的实现和对比

本文面向想要练习 PostgreSQL 中数据库复制基础知识但可能无法访问远程服务器的初学者。我认为学习新技术时&#xff0c;在自己的机器上运行示例以巩固概念是至关重要的。对于副本来说&#xff0c;这可能很困难&#xff0c;因为许多可用的资源假设用户具有一定的 PostgreSQL 经…

find_shape_model

*形状匹配 find_shape_model (ImageEmphasize, ModelID, -0.39, 0.78, 0.5, 1, 0.5, least_squares, [4,-2], 0.9, Row, Column, Angle, Score) *创建一个初始化矩阵 hom_mat2d_identity (HomMat2D) *从点和角度计算刚性仿射变换&#xff0c;找出模板和卡尺工具…

网页屏幕适配通透了

一&#xff0c;如果设计尺寸固定 那就按照固定尺寸开发 一般都是1920*1080 二&#xff0c;需要适配多种像素屏幕&#xff08;大屏可视化&#xff09; 可使用媒体查询设置多套css样式或者使用自适应单位&#xff0c;%&#xff0c;vw&#xff0c;vh 最好解决方案rem&#xff…

JavaScript 之 位运算

一、简介 ​ JavaScript的位运算符是将进行运算的数字&#xff08;八进制、十进制、十六进制等&#xff09;转换为32位的二进制串&#xff0c;超过 32 位的数字会丢弃其最高有效位&#xff0c;只保留后32位二进制串。然后再对每一位进行运算。但运算后得出的结果&#xff0c;会…

Python 元类 metaclass 详解

元类&#xff08;metaclass&#xff09;是 Python 中一个高级且相对较少使用的概念。元类可以被视为类的类&#xff0c;它控制类的创建过程。 一、基本概念 在 Python 中&#xff0c;一切皆对象。为了避免混淆&#xff0c;我们约定两个术语&#xff1a; 类实例&#xff1a;当…

IPv6路由综合运用

一、基础配置: SWA: sw1(config)#host swA swA(config)#ipv6 ena swA(config)# vlan 100 swA(config-vlan100)#int vlan 100 swA(config-if-vlan100)#ipv6 ena swA(config-vlan100)#ip add 172.16.1.1 255.255.255.252 swA(config-if-vlan100)#int e1/0/24 swA(conf…

教育科学杂志教育科学杂志社教育科学编辑部2023年第12期部分目录

“思政教育联合思维导图”教学模式在肝病感染控制护理临床教学中的应用 黄雪霞;陈海涵;蒋雅文 中职语文教学中厚植爱国主义情怀的要点分析 苏琴 职业素养视角下中职计算机专业课程教学改革实践 李石 产教融合背景下高职院校产业学院建设模式的实践探索 郭洋 《工程制图与CAD》课…