React 全栈体系（三）

已于 2023-09-11 22:13:47 修改
阅读量668 收藏
点赞数
分类专栏： React全栈体系 文章标签： react.js 前端 javascript
于 2023-08-25 17:00:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sgsgkxkx/article/details/132478348
版权

第二章 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.refs
				alert(input1.value)
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				const {input2} = this.refs
				alert(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} = this
				alert(input1.value)
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				const {input2} = this
				alert(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} = this
				alert(input1.value)
			}

			changeWeather = ()=>{
				//获取原来的状态
				const {isHot} = this.state
				//更新状态
				this.setState({isHot:!isHot})
			}

			saveInput = (c)=>{
				this.input1 = c;
				console.log('@',c);
			}

			render(){
				const {isHot} = this.state
				return(
					<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>

五、收集表单数据

1. 效果

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

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

2. 理解

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

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} = this
				alert(`你输入的用户名是：${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.state
				alert(`你输入的用户名是：${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.state
				alert(`你输入的用户名是：${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.state
				alert(`你输入的用户名是：${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 全栈体系（一）
柠檬小帽的博客 - 计算机全栈体系
08-11 2196
React 入门
React 全栈体系（五）
柠檬小帽的博客 - 计算机全栈体系
09-13 614
React 应用（一）
React 全栈体系（十三）
柠檬小帽的博客 - 计算机全栈体系
09-22 557
redux（二）
React 全栈体系（十六）
柠檬小帽的博客 - 计算机全栈体系
09-26 1165
React 扩展（二）
React 全栈体系（十七）
柠檬小帽的博客 - 计算机全栈体系
09-27 162
React Router 6（一）
React 全栈体系（九）
柠檬小帽的博客 - 计算机全栈体系
09-20 425
React 路由（一）
React 全栈体系（八）
柠檬小帽的博客 - 计算机全栈体系
09-19 547
React ajax（二）
React 全栈体系（七）
柠檬小帽的博客 - 计算机全栈体系
09-15 552
React ajax（一）
React 全栈体系（四）
柠檬小帽的博客 - 计算机全栈体系
09-07 972
React 面向组件编程（三）
基于 koa+react+mysql 的全栈项目开发
06-10
本项目“基于 koa+react+mysql 的全栈项目开发”就是一个很好的例子，它结合了JavaScript的Node.js框架Koa、前端库React以及关系型数据库MySQL，构建了一个完整的Web应用体系。下面我们将详细探讨这三个关键技术及其...
Full-Stack-Web-Development-with-React:使用React和Coursera专业化进行全栈Web开发
03-07
使用React进行全栈Web开发 使用React和Coursera专业化进行全栈Web开发。 本专业包含4门课程：前端Web UI框架和工具：引导4，使用React进行前端... Web开发的三层体系结构： 表示层与向用户交付有关，因此，这通常是与
后端 （Java Golang）全栈知识架构体系总结.zip
03-03
本资源“后端（Java Golang）全栈知识架构体系总结.zip”聚焦于两种广泛使用的后端编程语言——Java和Golang，提供了一个全面的学习路径，帮助开发者构建全栈技能。 首先，让我们关注Java。Java是一种面向对象的、...
django react_带有Django和React的全栈— Django
weixin_26738395的博客
08-27 1242
django reactI know it’s a very comprehensive title so I’ll keep it as simple as possible. 我知道这是一个非常全面的标题，所以我将使其尽可能简单。 In this article, we will make a book application from installation to the final p...
React18新特性
警警的博客
10-06 803
同时，需要注意的是，React 18的并发特性和新Hooks是基于Fiber架构实现的，它们共同构成了React 18中强大的渲染和控制能力。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。React 18的并发渲染（Concurrent Rendering）是一个革命性的特性，它通过一系列技术和API的引入，改变了React应用的渲染方式，使得渲染过程更加高效且可控。
【React】入门Day04 —— 项目搭建及登录与表单校验、token 管理、路由鉴权实现
2303_76696898的博客
10-04 1252
本文详细介绍了一个 React 项目的搭建过程以及登录模块、Layout 模块等功能模块的实现方式，包括项目结构调整、使用的技术（如 scss 预处理器、antd 组件库、react-router-dom 等）以及各个模块中涉及的关键知识点（如表单校验、token 管理、路由鉴权等），并为每个知识点提供了示例代码。
React 插入不转义的html
最新发布
y523648的博客
10-08 225
在 React 中，字符串作为内容插入到 JSX 中，默认会被转义。这是为了防止 执行恶意代码，XSS（跨站脚本攻击）等安全问题。如果想要 HTML 不被转义，可以使用dangerouslySetInnerHTML属性。
React 为什么引入 Hooks ？
u010194271的博客
10-08 301
React 中的“Hook”之所以得名，是因为它能让你“钩住”函数组件中的状态管理、生命周期和其他特性，类似于编程中常见的“钩子”概念。通过 Hooks，你可以在 React 中更灵活地插入逻辑、管理状态，提供了一种简洁、模块化的方式来构建复杂应用。
React基础知识
itmacy的博客
10-08 396
概念：JSX是JavaScript和XML(HTML)的缩写，表示在js代码中编写HTML模板结构，它是React中编写UI模板的方式。优势：1.HTML的声明式模板写法2.JS的可编程能力。
Java全栈知识体系思维导图解析与学习路径
资源摘要信息:"Java全栈知识体系思维导图" Java全栈知识体系是当前软件开发领域中一个非常热门的学习路径，它涵盖了从基础到高级的知识点，包括但不限于Java编程语言本身，Web前后端开发，以及数据库技术等多个方面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柠檬小帽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值