sgg-react编程31-37

最新推荐文章于 2021-08-02 12:15:09 发布
最新推荐文章于 2021-08-02 12:15:09 发布
阅读量73 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28764557/article/details/119254329
版权

refs总结

---31---

事件冒泡的概念：

 即使在li上没有onClick事件，那么点击ui可以冒泡到ul上的点击事件。

什么时候可以省略ref就是发生事件的元素就是我要操作的元素，我们可以省略ref。

react的事件委托： React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) —————为了的高效。

<!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>

---32---

受控组件和非受控组件：

看下原生的写法，就是不指定默认是get请求，跟着参数?name = & password =  

提示的是什么

 

<!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>

 一句话：现用现取就是非受控组件。

---33---

受控组件：

<!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>

 ---34---

高阶函数：

改进这些。

 

---35---

函数的柯里化：

不能这么写，这么写是返回值作为回调的。 

但是把函数作为返回值就是另外一个意思了，我们真正的回调是什么呢？

是红色的框

如何修改？

 如何将dataType变为对象(变量)

 高阶函数：

 常见的高阶函数：

函数的柯里化：

 

 演示：

---36---

不用柯里化实现：

<!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>

---37---

nzch
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sgg-Redis6课件.docx
03-18
Redis 6 课程概述 本课程主要介绍 Redis 6 的知识点，涵盖 NoSQL 数据库的概念、技术发展、分类、架构设计、性能优化等方面的内容。课程还对比了不同的 NoSQL 数据库，如 Memcache、Redis、MongoDB、HBase、...
sgg-os
03-07
sgg-os
sgg-react编程37-40
qq_28764557的博客
08-02 81
react的生命周期： 08:44 ---38---
sgg-react编程1-10
qq_28764557的博客
06-04 118
https://www.bilibili.com/video/BV1wy4y1D7JT?p=4&spm_id_from=pageDriver
sgg-react编程21-30
qq_28764557的博客
07-25 80
语法糖的写法。 ...是展开运算符是不能展开对象的。 react+bable允许用展开运算符展开一个对象的，不能随意使用，只是使用于标签的。 ---21---
sgg-react编程11-20
qq_28764557的博客
06-19 80
123
sgg---dubbo
qq_28764557的博客
03-23 145
RPC基础。 ----------------------------03-------------------------------- 灰度发布。 ------------------------------------04----------------------------- 设计架构： ------------------------------------0...
sgg---dubbo-原理
qq_28764557的博客
03-23 152
rpc的call代理对象传输信息，调用服务端，服务端代理又返回来。 代理对象。 步骤： 1.解析标签 2.代理对象 3.注册 4.路由和负载均衡 5.监控 6.封装rpc ----------------------------------------------------------24-----------------------------------------...
sgg-mybatis---02
qq_28764557的博客
07-12 136
看下 named的值是如何确定的呢？ 总结：参数多时会封装map，为了不混乱，我们可以使用@Param来指定封装时使用的key； #{key}就可以取出map中的值； (@Param("id")Integer id,@Param("lastName")String lastName); ParamNameResolver解析参数封装map的； //1、names：{0=id, 1=lastName}；构造器的时候就确定好了 确定流程： 1.获取每个标了param注解的参..
sgg-kafka
qq_28764557的博客
10-31 168
地址：https://www.bilibili.com/video/BV1a4411B7V9?from=search&seid=10631292900083333512 消费者消费策略：https://blog.csdn.net/lzb348110175/article/details/100773487 kafka消息过滤设置：https://blog.csdn.net/yy756127197/article/details/103901814 ...
sgg-mybatis---04
qq_28764557的博客
08-31 120
---71--- ---72---
SGG-Fetcher.github.io
02-15
SGG-Fetcher.github.io 只是为我 ：）
sgg-mod-format:为SuperGiantGames的游戏（堡垒，晶体管，派尔，哈迪斯）制作和加载mod的格式
03-16
SuperGiantGames Mod格式 为SuperGiantGames游戏（堡垒，晶体管，派尔，哈迪斯）制作和加载lua / sjson / xml mod的格式 要使用modimporter.py请将其放入游戏的Content文件夹中。 为了获得完整的功能，它还需要。...
Elasticsearch-sgg
11-05
Elasticsearch-sgg
ChatGPT原理1-3
06-20
ChatGPT原理1-3
aiohttp-3.4.0b2.tar.gz
最新发布
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
小程序版通过CNN训练识别印刷体数字和字母-不含数据集图片-含逐行注释和说明文档.zip
06-20
本代码是基于python pytorch环境安装的。 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集。 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地。训练完成之后会有log日志保存本地，里面记录了每个epoch的验证集损失值和准确率。 运行03flask_服务端.py就可以生成与小程序交互的url了 然后需要我们运行微信开发者工具，如果之前没有下载过，则需要在电脑网页上，搜微信开发者工具进行下载。 导入我们的小
AI+智慧校园建设方案PPT(100页).pptx
06-20
智慧校园大数据信息化AIOT平台建设整体解决方案是一个综合性的校园智能化升级计划，旨在通过应用物联网、大数据、人工智能等高新技术，打造一个安全、便捷、绿色的校园环境。该方案遵循国家教育信息化2.0规划和相关标准，强调技术在教育领域的深度应用。 方案的核心内容包括全场景的智能互联、物信融合、AI赋能创新应用，以及校园营运指挥中心的建设。它涵盖了智慧管理、智慧服务、智慧教学等多个方面，通过SAAS、PAAS、DAAS、IAAS等多层次的系统架构，实现从数据存储、管理到智能分析和应用的全面覆盖。 智慧应用聚焦于校园特色场景，如教室、宿舍、图书馆和食堂，通过AI视频智能分析技术，提供便捷服务。方案还包括智能安防、智慧消防、能耗监管等，以实现校园的智能化管理。例如，人脸门禁系统提供无感通行，提高安全性和便捷性；车辆管理系统通过轨迹分析和布控，优化交通秩序。 此外，方案还强调了智能照明、智能水控和电控等节能环保措施，以及通过智能语音分析和录播方案提升教学质量。智慧宿舍通过人脸宿管和智能节电，提高宿舍管理效率。整体上，该方案通过技术集成和创新，推动校园向智能化、信息化转型，为师生创造更安全、便捷、环保的学习和生活环境。
出错了，提示如下：*Error* defun: argument #1 should be a symbol (type template = "sgg") - (move - right)
06-02
这个错误提示是因为在定义函数`move-right`时，函数名没有加单引号，导致系统将其作为变量处理。解决这个问题，只需要在函数名前面加上单引号即可。修改后的代码如下： ``` ; 定义函数，用于将选中的对象向右移动5...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值