(五)React受控表单、获取DOM

1. React受控表单

概念:使用React组件的状态(useState)控制表单的状态
在这里插入图片描述

  1. 准备一个React状态值
const [value, setValue] = useState('')
  1. 通过value属性绑定状态,通过onChange属性绑定状态同步的函数
<input type="text"valye={value}onChange={(e) => setValue(e.target.value)}
/>

实现效果:

  • 无论修改表单或者State,对应一方也会对应改变
    在这里插入图片描述

2. React获取DOM

在React组件中获取、操作DOM,需要使用useRef钩子函数,分为两步:

  1. 使用useRef创建ref对象,并与JSX绑定
 const inputRef = useRef(null)
<input type="text" ref={inputRef} />
  1. 在DOM可用时,通过inputRef.current拿到DOM对象
console.log(inputRef.current)

用例:

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;

点击按钮,console打印dom元素
在这里插入图片描述

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

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

相关文章

计算机网络期末复习1(最后一天才开始学版)

1.一个PPP帧的数据部分&#xff08;用十六进制写出&#xff09;是7D 5E FE 27 7D 5D 7D 5D 65 7D 5E。试问真正的数据是&#xff08;用十六进制写出&#xff09; 由于PPP帧的标志字段为7E,因此,为了区别标志字段和信息字段,将信息字段中出现的每一个0x7E转变成(0x7D,0x5E),0x7…

PIL保存后的图像莫名的失真,部分不失真部分很失真

原图片是这样的&#xff1a; PIL会自行**“自救”被正则化的图片&#xff0c;导致自救过曝&#xff0c;部分颜色非常失真&#xff0c;但是部分又保存的还行。现象如下&#xff1a; 这里你检查一下你保存的是不是被正则化的图片**&#xff0c;如果是&#xff0c;改改。 查看一…

【vue大作业-端午节主题网站】【预览展示视频和详细文档】

vue大作业-端午节主题网站介绍 端午节&#xff0c;又称为龙舟节&#xff0c;是中国的传统节日之一&#xff0c;每年农历五月初五庆祝。这个节日不仅是纪念古代爱国诗人屈原的日子&#xff0c;也是家人团聚、共享美食的时刻。今天&#xff0c;我们非常高兴地分享一个以端午节为…

宝塔面板使用技巧(pure-FTP)上传文件和文件夹默认权限644的修改

前言 科技在进步各种各样的开源软件和库让我们应接不暇&#xff0c;我估计现在所有做php开发的人员都知道宝塔面板&#xff0c;我就经常用&#xff0c;但是不知道大家出现过一个问题不就是在我们开发过程中需要实时的给服务器上传我们开发的文件那么就涉及到了宝塔自带的pure-F…

【unity小技巧】unity3D寻路指示轨迹预测

最终效果 文章目录 最终效果前言设置好LineRenderer线组件配置&#xff0c;用于绘制寻路轨迹代码烘培导航网格运行效果参考 前言 最近刷到b站up主山长操作库的内容&#xff0c;感觉很有意思&#xff0c;于是就简单整理了一下。注意本文的实现思路完全是按这位up整理的&#xf…

JAVAEE之网络原理(2)_传输控制协议(TCP)、概念、格式、确认应答及超时重传机制

前言 在上一节中&#xff0c;我们介绍了 UDP (用户数据报) 的相关知识&#xff0c;在这一节中我们将继续介绍传输层中另一种更为重要的协议。 一、什么是TCP协议&#xff1f; 1.1 TCP 基本概念 TCP协议全称&#xff1a;传输控制协议&#xff08;TCP&#xff0c;Transmission C…

python基础语法 002 - 4 字符串

1 字符串 字符串&#xff1a;引号括起来的数据类型 # 双引号 a "yuze wang"# 单引号 a ’yuze wang‘# 三引号 a ’‘’yuze‘‘’ a """yuze"""注意&#xff1a;所有格式表示都是半角&#xff0c;全角会报错 1.1 引号表示 …

HSE在企业中的重要性:健康、安全与环境的全面保障

在当今企业运营中&#xff0c;健康、安全与环境&#xff08;HSE&#xff09;管理体系已经成为不可或缺的一部分。HSE管理不仅保护员工的健康和安全&#xff0c;还致力于环境的可持续发展。本文将简洁明了地阐述HSE在企业中的关键作用及其带来的综合效益。 员工健康保护 健康风…

深入理解Qt状态机的应用(一)

Qt的状态机框架提供了一种管理复杂系统状态的方法&#xff0c;它基于经典的有限状态机&#xff08;FSM&#xff09;理论。这种框架在开发涉及多种状态和状态之间需要明确转换的应用程序时特别有用&#xff0c;如用户界面交互、网络协议、游戏开发等场景。 什么是有限状态机&a…

手写一个JSON可视化工具

前言 JSON 平时大家都会用到&#xff0c;都不陌生&#xff0c;今天就一起来实现一个 JSON 的可视化工具。 大概长成下面的样子&#xff1a; 树展示 相比于现有的一些 JSON 格式化工具&#xff0c;我们今天制作的这个小工具会把 JSON 转为树去表示。其中&#xff1a; 橙色标…

跟TED演讲学英文:A tale of mental illness -- from the inside by Elyn Saks

A tale of mental illness – from the inside Link: https://www.ted.com/talks/elyn_saks_a_tale_of_mental_illness_from_the_inside Speaker: Elyn Saks Date: June 2012 文章目录 A tale of mental illness -- from the insideIntroductionVocabularySummaryTranscriptA…

全新AI图像擦处理工具上线,手机电脑版资源合集下载

下载地址&#xff1a; 安卓手机版&#xff1a; 点击下载 苹果手机版&#xff1a; 点击下载 电脑版&#xff08;支持Mac和Windows&#xff09;&#xff1a; 点击下载 图像处理技术在当今迅速发展&#xff0c;为了满足广大用户的需求&#xff0c;我们推出了一款强大的图像优化…

三星S20以上手机中的动态相片及其分解

三星S20以后的相机&#xff0c;相机拍出来的图片&#xff0c;用三星手机自带的“相册”打开之后&#xff0c;还会有“查看动态照片”的选项&#xff0c;点击之后就能查看拍照片时前后2秒左右的视频&#xff01; 不知道这个功能是不是三星独有的。 这样得到的图片非常大。因为…

yum的概念、相关命令、ftp http部署步骤;NFS共享文件操作步骤

目录 yum 配置文件 缓存功能操作步骤 创建并配置本地仓库文件 yum相关命令 yum install __ yum repolist yum list __ yum info __ yum search __ yum whatprovides __ yum remove __ yum -y update __ yum history yum grouplist yum groupinstall "__&q…

前沿技术丨实车测试必须注意的3个方面

在汽车网络通信中&#xff0c;ECU零部件测试、域/系统测试在测试条件上存在局限性&#xff0c;往往由于无法完全仿真工作环境、无法排除特殊干扰因素、异常场景预估不充分&#xff0c;导致在集成到整车后才新暴露出一些功能、性能、兼容性问题。 实车通信测试是作为测试验证的…

DolphinScheduler日志乱码、worker日志太多磁盘报警、版本更新导致不兼容怎么办?

作者 | 刘宇星 本文作者总结了在使用Apache DolphinScheduler过程中遇见过的常见问题及其解决方案&#xff0c;包括日志出现乱码、worker日志太多磁盘报警、版本更新导致不兼容问题等&#xff0c;快来看看有没有困扰你想要的答案吧&#xff01; DolphinScheduler集群环境有多…

实验室装修公司教你在实验室装修设计中要注意哪些细节

实验室装修设计是一项高度专业化的工作&#xff0c;涉及到空间布局、材料选择、家具配置、施工质量和验收标准等多个方面。一个成功的实验室装修项目&#xff0c;不仅要满足实验操作的需求&#xff0c;还要确保人员的安全和舒适。以下是广州实验室装修公司小编分享的在实验室装…

github如何删除仓库?

之前练习Git上传的时候&#xff0c;在Github创建的测试项目已经不需要了&#xff0c;所以要如何删除&#xff1f; 首先进入Github主页&#xff0c;可以直接点击左侧1处的仓库&#xff0c;也可以点击2处的头像&#xff0c;再选择进入那个仓库。 我选择删除最后一个FlashAndShan…

高压线防外破警示灯在电力安全发挥的作用_鼎跃安全

高压输电线路往往跨越城市、乡村和野外&#xff0c;覆盖范围广泛。随着城乡建设和交通运输的快速发展&#xff0c;高压线路周围的活动频繁&#xff0c;外部破坏风险增加。车辆撞击电线杆、施工机械误碰线路以及人为破坏等事件时有发生&#xff0c;严重影响电力供应的稳定性和安…

基于javassm实现的物流管理系统

开发语言&#xff1a;Java 框架&#xff1a;ssm 数据库&#xff1a;mysql 系统页面展示 4.1登陆页面 平台登录&#xff1a;主要是做权限分配和安全限制等操作。可以把快递员&#xff0c;客户&#xff0c;派单员等人员角色区分开来。 4.2注册页面 用户注册界面&#xff1a;…