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

React 全栈体系（三）

news 2026/2/8 13:07:05

第二章 React面向组件编程

四、组件三大核心属性3: refs与事件处理

1. 效果

需求: 自定义组件, 功能说明如下:
- 点击按钮, 提示第一个输入框中的值
- 当第2个输入框失去焦点时, 提示这个输入框中的值

请添加图片描述

2. 理解

组件内的标签可以定义ref属性来标识自己

3. 编码

3.1 字符串形式的ref

<input ref="input1"/>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_字符串形式的ref</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{//展示左侧输入框的数据showData = ()=>{const {input1} = this.refsalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = this.refsalert(input2.value)}render(){return(<div><input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/></div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

3.2 回调形式的ref

<input ref={(c)=>{this.input1 = c}}/>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_回调函数形式的ref</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{//展示左侧输入框的数据showData = ()=>{const {input1} = thisalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = thisalert(input2.value)}render(){return(<div><input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_回调ref中回调执行次数的问题</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{state = {isHot:false}showInfo = ()=>{const {input1} = thisalert(input1.value)}changeWeather = ()=>{//获取原来的状态const {isHot} = this.state//更新状态this.setState({isHot:!isHot})}saveInput = (c)=>{this.input1 = c;console.log('@',c);}render(){const {isHot} = this.statereturn(<div><h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}<input ref={this.saveInput} type="text"/><br/><br/><button onClick={this.showInfo}>点我提示输入的数据</button><button onClick={this.changeWeather}>点我切换天气</button></div>)}}//渲染组件到页面ReactDOM.render(<Demo/>,document.getElementById('test'))</script>
</body>
</html>

3.3 createRef创建ref容器

myRef = React.createRef() 
<input ref={this.myRef}/>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>4_createRef</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{/* React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的*/myRef = React.createRef()myRef2 = React.createRef()//展示左侧输入框的数据showData = ()=>{alert(this.myRef.current.value);}//展示右侧输入框的数据showData2 = ()=>{alert(this.myRef2.current.value);}render(){return(<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

4. 事件处理

通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件处理</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{/* (1).通过onXxx属性指定事件处理函数(注意大小写)a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref*///创建ref容器myRef = React.createRef()myRef2 = React.createRef()//展示左侧输入框的数据showData = (event) =>{console.log(event.target);alert(this.myRef.current.value);}//展示右侧输入框的数据showData2 = (event) =>{alert(event.target.value);}render(){return(<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

5. 收集表单数据

5.1 效果

需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录提示输入信息

在这里插入图片描述
请添加图片描述

5.2 理解

包含表单的组件分类
- 受控组件
- 非受控组件

5.3 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_非受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = thisalert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input ref={c => this.username = c} type="text" name="username"/>密码：<input ref={c => this.password = c} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存用户名到状态中saveUsername = (event)=>{this.setState({username:event.target.value})}//保存密码到状态中savePassword = (event)=>{this.setState({password:event.target.value})}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveUsername} type="text" name="username"/>密码：<input onChange={this.savePassword} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>对象相关的知识</title></head><body><script type="text/javascript" >let a = 'name'let obj = {} // {name:'tom'}obj[a] = 'tom'console.log(obj);</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>演示函数的柯里化</title></head><body><script type="text/javascript" >/* function sum(a,b,c){return a+b+c} */function sum(a){return(b)=>{return (c)=>{return a+b+c}}}const result = sum(1)(2)(3)console.log(result);</script></body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>高阶函数_函数柯里化</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//#region /* 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。常见的高阶函数有：Promise、setTimeout、arr.map()等等函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 function sum(a){return(b)=>{return (c)=>{return a+b+c}}}*///#endregion//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存表单数据到状态中saveFormData = (dataType)=>{return (event)=>{this.setState({[dataType]:event.target.value})}}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>密码：<input onChange={this.saveFormData('password')} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_不用函数柯里化的实现</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存表单数据到状态中saveFormData = (dataType,event)=>{this.setState({[dataType]:event.target.value})}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>

React 全栈体系（三）

第二章 React面向组件编程四、组件三大核心属性3: refs与事件处理 1. 效果需求: 自定义组件, 功能说明如下: 点击按钮, 提示第一个输入框中的值当第2个输入框失去焦点时, 提示这个输入框中的值 2. 理解组件内的标签可以定义ref属性来标识自己 3. 编码 3.1 字符串形式…...

编程日记 2023/8/26 1:47:00

腾讯云下一代CDN -- EdgeOne加速MinIO对象存储

省流使用MinIO作为EdgeOne的源站。背景介绍项目中需要一个兼容S3协议的对象存储服务，腾讯云的COS虽然也兼容S3协议，但是也只是支持简单的上传下载，对于上传的时候同时打标签这种需求，就不兼容S3了。所以决定自建一个对象存储…...

编程日记 2023/8/26 1:45:59

GitLab CI 指南前置工作部署GitLab 部署GitLab-Runner 注册Runner到GitLab docker exec -it gitlab-runner bash # 进入容器 gitlab-runner register #调用register命令开始注册 # 在Gitlab Setting中找到Runners，如下图所示Enter the GitLab instance URL (for example, …...

编程日记 2023/8/26 1:44:57

MyBatis的核心技术掌握，简单易懂（上）

目录一.MyBatis中的动态SQL 二.MyBatis中的模糊查询 1. # 符号 2. $ 符号 ---问题 ---所以大家知道 # 和 $ 在MyBatis中的模糊查询中的区别了嘛？？ 三.MyBatis 中的结果映射 1. resultType： 2. resultMap： ---问题 ---…...

编程日记 2023/8/26 1:43:54

Redisson自定义序列化

Redisson自定义序列化_redisson 序列化_yzh_1346983557的博客-CSDN博客 redis存取的数据一定是可序列化的，而可序列化方式可以自定义。如果不同客户端设置的可序列化方式不一样，会导致读取不一致的问题。常见的序列化方式有几下几种...

编程日记 2023/8/26 1:42:51

MongoDB Long 类型 shell 查询

场景 1、某数据ID为Long类型，JAVA 定义实体类 Id Long id 2、查询数据库，此数据存在 3、使用 shell 查询，查不到数据 4、JAVA代码查询Query.query 不受任何影响分析尝试解决（一） long 在 mongo中为 int64 类型…...

编程日记 2023/8/26 1:41:48

回归预测 | MATLAB实现GA-APSO-IBP改进遗传-粒子群算法优化双层BP神经网络多输入单输出回归预测

回归预测 | MATLAB实现GA-APSO-IBP改进遗传-粒子群算法优化双层BP神经网络多输入单输出回归预测目录回归预测 | MATLAB实现GA-APSO-IBP改进遗传-粒子群算法优化双层BP神经网络多输入单输出回归预测效果一览基本介绍模型描述程序设计参考资料效果一览基本介绍 MATLAB实现GA-…...

编程日记 2023/8/26 1:40:44

Spring cache整合Redis使用介绍

🍓 简介：java系列技术分享(👉持续更新中…🔥) 🍓 初衷:一起学习、一起进步、坚持不懈 🍓 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正🙏 🍓 希望这篇文章对你有所帮助,欢…...

编程日记 2023/8/26 1:39:43

Metasploit提权

一、bypassuac 用户账户控制（User Account Control，简写作UAC)是微软公司在其Windows Vista及更高版本操作系统中采用的一种控制机制。其原理是通知用户是否对应用程序使用硬盘驱动器和系统文件授权，以达到帮助阻止恶意程序（有时也…...

编程日记 2023/8/26 1:38:40

TypeScript三种特殊类型

1.any类型说明：any类型代表着可以赋值任意类型 let nickname:any"王二"nickname15nicknametruenicknameundefinednicknamenullnickname{}2.unknown类型说明：类似any类型；只是不能赋值到其它类型上；除了any和known。…...

编程日记 2023/8/26 1:37:39

如何使用CSS实现一个响应式轮播图？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 使用CSS实现响应式轮播图的示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界记得点击上方或者右侧链接订阅本专栏哦几何带…...

编程日记 2023/8/26 1:36:37

数据生成 | MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成

数据生成 | MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成目录数据生成 | MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成生成效果基本描述模型描述程序设计参考资料生成效果基本描述 1.MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成； 2.马尔科夫链蒙特卡洛方…...

编程日记 2023/8/26 1:35:33

【从零开始的rust web开发之路二】axum中间件和共享状态使用

系列文章目录第一章 axum学习使用第二章 axum中间件使用文章目录系列文章目录前言一、中间件是什么二、中间件使用常用中间件使用中间件使用TraceLayer中间件实现请求日志打印自定义中间件共享状态前言上篇文件讲了路由和参数相应相关的。axum还有个关键的地方是中间件…...

编程日记 2023/8/26 1:34:30

Vue操作时间

一、获取现在时间 const currentTime () > {let date new Date();let year date.getFullYear(); //月份从0~11，所以加一let month date.getMonth();let dateArr [date.getMonth() 1,date.getDate(),date.getHours(),date.getMinutes(),date.getSeconds(),…...

编程日记 2023/8/26 1:33:27

数据库——Redis 常见数据结构以及使用场景分析

文章目录 1. string2. list3. hash4. set5. sorted set 你可以自己本机安装 redis 或者通过 redis 官网提供的在线 redis 环境。 1. string 介绍 ：string 数据结构是简单的 key-value 类型。虽然 Redis 是用 C 语言写的，但是 Redis 并没有使用 C 的字符串…...

编程日记 2023/8/26 1:32:25

数学建模-规划工具箱yalmip

官网下载实例 %% yalmip 求解 yalmip clc;clear;close all; %% %sdpvar实型变量 intvar 整形变量 binvar 0-1型变量 psdpvar(3,1); %定义变量 %目标函数要把求最大值转化为最小值 Objective-p(1)^2p(2)^2-p(2)*p(3);%约束条件 Constraints[0<p<1,(p(1)^2p…...

编程日记 2023/8/26 1:31:24

[SQL挖掘机] - 窗口函数 - 计算移动平均

介绍: 在窗口函数使用时，计算的是累积到当前行的所有的数据的相关操作。实际上，还可以指定更加详细的汇总范围。该汇总范围称为框架 (frame)。其实这里也可以理解成一个窗口, 这个窗口是我们可以进行设置的. 之前我们介绍的窗口函数是根据partition…...

编程日记 2023/8/26 1:30:21

域名和hostname

最近用git克隆远程仓库时总是超时，报错说是代理的问题，但打开和关闭代理都没能解决问题，后面了解到可以关闭git命令的全局代理： git config --global --unset http.proxy git config --global --unset https.proxy如果下次要用的…...

编程日记 2023/8/26 1:29:16

echarts 甘特图一组显示多组数据

<template><el-button type"primary" click"addlin">添加线</el-button><el-button type"success" click"addArea">添加区域</el-button><div ref"echart" id"echart" class&qu…...

编程日记 2023/8/26 1:28:15

1139. 最大的以 1 为边界的正方形；2087. 网格图中机器人回家的最小代价；1145. 二叉树着色游戏

1139. 最大的以 1 为边界的正方形核心思想：枚举正方向的右下角坐标（i，j），然后你只需要判断四条边的连续一的最小个数即可，这里是边求连续一的个数同时求解结果。 087. 网格图中机器人回家的最小代价核心…...

编程日记 2023/8/26 1:27:13

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架，用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录，以帮助监视应用程序行为和诊断问题。可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...

编程新知 2025/11/28 2:51:33

Unity3D中Gfx.WaitForPresent优化方案

前言在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...

编程新知 2026/2/7 17:31:44

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了估计有） 刷机程序和镜像就不提供了。要刷的时…...

编程新知 2026/2/6 20:07:35

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码注：文档 https://developers.weixin.qq…...

编程新知 2026/1/29 8:41:55