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

news2024/11/24 2:26:28

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.coloradmin.cn/o/1819369.html

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

相关文章

STL入门指南:从容器到算法的完美结合

目录 ​编辑 一、什么是STL 二、STL的版本 三、STL的六大组件 1. 容器&#xff08;Containers&#xff09;&#xff1a; 2. 算法&#xff08;Algorithms&#xff09;&#xff1a; 3. 迭代器&#xff08;Iterators&#xff09;&#xff1a; 4. 仿函数&#xff08;Functo…

群晖NAS安装配置Joplin Server用来存储同步Joplin笔记内容

一、Joplin Server简介 1.1、Joplin Server介绍 Joplin支持多种方式进行同步用户的笔记数据&#xff08;如&#xff1a;Joplin自己提供的收费的云服务Joplin Cloud&#xff0c;还有第三方的云盘如Dropbox、OneDrive&#xff0c;还有自建的云盘Nextcloud、或者通过WebDAV协议来…

我的高考往事

高考对于每一个参加过的人来说&#xff0c;都是一段非常难忘的回忆。 我参加高考&#xff0c;是在2001年。虽然迄今已经过去了23年&#xff0c;但很多细节仍然记忆犹新。 今天这篇文章&#xff0c;我就和大家分享一下&#xff0c;我的高考往事。 █ 青少年时代 我的老家是在江西…

波拉西亚战记加速器 台服波拉西亚战记免费加速器

波拉西亚战记是一款新上线的MMORPG游戏&#xff0c;游戏内我们有多个角色职业可以选择&#xff0c;可以体验不同的战斗流派玩法&#xff0c;开放式的地图设计&#xff0c;玩家可以自由的进行探索冒险&#xff0c;寻找各种物资。各种随机事件可以触发&#xff0c;让玩家的冒险过…

OZON芒果店长erp,OZON平台支持什么ERP

在跨境电商的浪潮中&#xff0c;OZON平台凭借其独特的优势&#xff0c;吸引了众多卖家入驻。然而&#xff0c;随着业务规模的不断扩大&#xff0c;如何高效管理商品、处理订单、优化仓储物流等成为了卖家们亟需解决的问题。此时&#xff0c;一款强大的ERP&#xff08;企业资源规…

第19篇 Intel FPGA Monitor Program的使用<二>

Q&#xff1a;Intel FPGA Monitor Program里集成的Computer System是什么架构的呢&#xff1f; A&#xff1a;我们以DE2-115的DE2-115_Computer System为例介绍&#xff0c;简单说DE2-115_Computer System就是一个Qsys系统&#xff0c;该系统包含Nios II处理器以及DE2-115开发…

不停“整活”的零食很忙,怎么就跨入万店时代了?

6月12日&#xff0c;合并后的零食很忙、赵一鸣零食宣布&#xff0c;全国门店总数已突破10000家。同时&#xff0c;集团名称也变更为鸣鸣很忙集团。根据第三方机构弗若斯特沙利文认证&#xff0c;鸣鸣很忙集团全国门店数位居零食连锁行业第一。 在此之前&#xff0c;尽管零食很…

8个宝藏级物联网平台推荐

随着物联网技术的飞速发展&#xff0c;越来越多的企业开始寻求高效、可靠的物联网平台来实现设备连接、数据收集和智能分析。以下是8个宝藏级的物联网平台推荐&#xff0c;它们以其独特的功能和优势&#xff0c;帮助企业加速数字化转型。 1. ThingsKit物联网平台 ThingsKit 是…

windows 11中如何设置默认为英文输入法

由于工作需要&#xff0c;我一直在windows7下使用VB6&#xff0c;以前尝试着使用新的系统&#xff0c;但都无法正常安装vb&#xff0c;最近几天由于系统一次作死操作&#xff0c;逼着我安装了win11&#xff0c;并且在其上正常安装了vb6&#xff0c;本想着十分高兴&#xff0c;终…

垂直业务系统权限设计

遵循 RBAC 的原则&#xff0c;以更贴近日常工作的业务处理流程&#xff0c;设计一套与总公司分公司相吻合的组织、部门、岗位结构&#xff0c;配套可以继承的权限组和特定的岗位权限&#xff0c;实现系统授权的操作简化和权限的集成应用简化。 RBAC&#xff08;Role-Based Acce…

C++中的结构体——结构体指针

作用&#xff1a;通过指针访问结构体中的成员 利用操作符 -> 可以通过结构体指针访问结构体属性 示例 运行结果

新研究使VQE算法成功扩展到12个量子比特,误差抑制在两个数量级

量子计算化学已成为量子计算的一个潜在应用领域。 混合量子-经典计算方法&#xff0c;如变分量子本征求解器&#xff0c;已被设计为解决量子化学问题有希望的解决方案。但该计算方法面对着因理论复杂性和实验不完善所带来的挑战&#xff0c;在实现可靠和准确结果方面被限制。因…

史上最全盘点:一文告诉你什么是erp?erp系统厂商分别有哪些?

✅ 什么是ERP&#xff1f; ERP是Enterprise Resource Planning&#xff08;企业资源计划&#xff09;的简称&#xff0c;ERP是针对物资资源管理&#xff08;物流&#xff09;、人力资源管理&#xff08;人流&#xff09;、财务资源管理&#xff08;资金流&#xff09;、信息资…

东胜物流软件 GetProParentModuTreeList SQL注入漏洞复现

0x01 产品简介 东胜物流软件是青岛东胜伟业软件有限公司一款集订单管理、仓库管理、运输管理等多种功能于一体的物流管理软件。该公司初创于2004年11月(前身为青岛景宏物流信息技术有限公司),专注于航运物流相关环节的产品和服务。东胜物流信息管理系统货代版采用MS-SQLser…

LeetCode刷题之HOT100之验证二叉搜索树

1、题目描述 2、逻辑分析 要求给定的根节点是否是有效的二叉树。有效的二叉搜索树定义如上。那么如何求解呢&#xff1f;题解给出了两张求解方法&#xff1a;递归、中序遍历。这边倾向于中序遍历&#xff0c;中序遍历后的二叉树是升序排序的&#xff0c;以这个性质即可解题。 …

【GD32】 TIMER通用定时器学习+PWM输出占空比控制LED

扩展&#xff1a;PWM波形输出捕获 这里写目录标题 一、简介二、具体功能描述1、时钟源的选择&#xff1a;2、预分频器&#xff1a;3、计数模式&#xff1a;向上计数模式&#xff1a;向下计数模式&#xff1a;中央对齐模式&#xff1a; 4、捕获/比较通道 输入捕获模式 输出…

辽宁普通测径仪升级智能测径仪后都有哪些改进?

关键字: 普通测径仪, 智能测径仪, 测径仪升级, 测径仪特点, 智能测径仪优势, 目前多数厂家测径仪的数据处理方式是单片机计算出最终结果&#xff0c;然后传输到工控机后期处理。这样的电路系统对轧钢现场的高温、高粉尘和强电磁干扰的环境适应性很差&#xff0c;使得同一厂家、…

node 版本控制

官网下载 nvm 包 查看node和npm版本&#xff1a;https://github.com/coreybutler/nvm-windows/releases 2、查看nvm是否安装成功 nvm3、基本使用 1、查看当前node可用版本 nvm ls2、查看当前使用的node版本 nvm current3、安装指定node版本 nvm install 19.9.04、切换版…

【第三篇】SpringSecurity请求流程分析

简介 本篇文章主要分析一下SpringSecurity在系统启动的时候做了那些事情、第一次请求执行的流程是什么、以及SpringSecurity的认证流程是怎么样的,主要的过滤器有哪些? SpringSecurity初始化流程 1.加载配置文件web.xml 当Web服务启动的时候,会加载我们配置的web.xml文件…

嵌入式常用调试方法

目录 调试工具 日志打印 1. Debug日志打印 2. RTT日志打印 3. 串口日志打印 总结 嵌入式系统的调试是一个复杂且关键的过程&#xff0c;涉及多种工具和技术的综合应用。以下是对嵌入式常见调试工具、日志打印方式的全面报告&#xff0c;包括Debug、RTT&#xff08;Real-T…