react学习——13react高阶函数_函数柯里化

1、高阶函数柯里化实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--    移动端适配--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>1_高阶函数_函数柯里化.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/class Demo extends React.Component{//#region/*高阶函数:如果一个函数符合下面2个规范中的任何一个,那么这个函数就是一个高阶函数1.若A函数,接收的参数是一个函数,那么A就是一个高阶函数2.若A函数,调用的返回值是一个函数,那么A就是一个高阶函数常见的高阶函数有:promise、setTimeout、arr.map()等等函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一的函数编码形式。*///#endregionstate = {username:'',//用户名password:''//密码}//保存数据saveFormData=(type)=>{return (event)=>{console.log("=="+type,event.target.value)this.setState({[type]: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(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>

2、不用柯里化实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--    移动端适配--><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>2_不用柯里化实现.html</title>
</head>
<body>
<!--准备一个容器-->
<div id="root"></div>
<!--引入react核心库-->
<script type="text/javascript" src="../js/react.development16.3.1.js"></script>
<!--引入react-dom.js库,用于支持react操作DOM-->
<script type="text/javascript" src="../js/react-dom.development16.3.1.js"></script>
<!--引入babel,用于jsx的转换jsx-->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写babel*/class Demo extends React.Component{//#region/*高阶函数:如果一个函数符合下面2个规范中的任何一个,那么这个函数就是一个高阶函数1.若A函数,接收的参数是一个函数,那么A就是一个高阶函数2.若A函数,调用的返回值是一个函数,那么A就是一个高阶函数常见的高阶函数有:promise、setTimeout、arr.map()等等函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一的函数编码形式。*///#endregionstate = {username:'',//用户名password:''//密码}//保存数据saveFormData=(type,event)=>{this.setState({[type]: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(<Demo/>,document.getElementById('root'))
</script>
</body>
</html>

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

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

相关文章

提取图像主色调

依赖 Pillow 库。 提取图像主色调&#xff0c;直接上代码&#xff1a; from PIL import Imagedef extract_main_color(img_path: str, delta_h: float 0.3) -> str:"""获取图像主色调Args:img_path: 输入图像的路径delta_h: 像素色相和平均色相做减法的绝…

MIL图像处理那些事:定义感兴趣区域ROI的两种方法(示例项目C#源码)

文章目录 效果展示第一种方法:通过鼠标框选GetROIForm构造函数如何缩放--MdispZoom的使用Ctr+滚轮缩放放大两倍:如何平移--MdispPan的使用双击返回ROI第二种方法:直接编辑ROI框显示ROI示例项目C#源码(百度网盘)本示例提供两种方法定义感兴趣区域ROI 效果展示 第一种方法:通过鼠…

测试基础15:测试用例设计方法-场景设计(流程分析)

课程大纲 1、定义 系统多个功能串联形成业务流程&#xff0c;不仅需要验证正确的主流程&#xff0c;而且需要验证各个功能点各种异常情况。 2、应用场景 与因果图&判定表方法的相似之处&#xff1a;界面需手动填写的输入框少&#xff0c;基本只需选择有限的几个&#xff08…

AppInventor2程序设计里代码块较多,有点卡,有没有办法解决?

问&#xff1a;请问下程序设计里面写的程序比较多&#xff0c;有点卡&#xff0c;这个有没有办法呢&#xff1f; 答&#xff1a;AppInventor2目前不支持代码块的模块化&#xff0c;不过也有一些技巧可以减少代码块的数量&#xff0c;还能提高代码的质量&#xff1a; 1. 提取过程…

小抄 20240620

1 段永平和他的徒弟们经常提的三个词&#xff1a;平常心&#xff0c;本分&#xff0c;常识。 都是很普通的道理&#xff0c;但普通人基本不用。常识&#xff0c;平常人不认识。 2 觉得一件事很大的时候&#xff0c;可以让自己变得更大&#xff0c;来稀释事情的大小。 一个…

Ubuntu系统 常用工具

Ubuntu系统 常用工具 1 输入法 googlepinyin 参考&#xff1a; https://blog.csdn.net/qq_36393978/article/details/118483011 卸载fcitx残留 sudo apt-get remove fcitx sudo apt-get remove fcitx-module* sudo apt-get remove fcitx-frontend* sudo apt-get purge fcit…

Jenkins定时构建自动化(四):Python 的 argparse 模块

目录 一、主要功能和用途 二、核心类和方法 三、总结 四、argparse模块示例 Jenkins定时构建自动化(一)&#xff1a;Jenkins下载安装配置-CSDN博客 Jenkins定时构建自动化(二)&#xff1a;Jenkins的定时构建-CSDN博客 Jenkins定时构建自动化(三)&#xff1a;手动定时构建…

[FreeRTOS 基础知识] 信号量 概念

文章目录 信号量定义信号量特性 信号量定义 信号量是一个抽象的数据类型&#xff0c;通常包含一个整数值以及一个等待该值变为正数的任务列表&#xff08;也称为等待队列&#xff09;。信号量的整数值代表了系统中某种资源的可用数量。 在操作系统中信号量用于控制对共享资源访…

提升办公效率的利器—OnlyOffice文档8.1深度体验

目录 1. 前言 2. 安装 3. 基本使用 3.1 文档编辑 3.2 表格处理 3.3 演示文稿 4. 个人评价 5. 总结 1. 前言 在当今信息化时代&#xff0c;办公软件已经成为我们日常工作中不可或缺的工具。无论是撰写文档、处理数据&#xff0c;还是制作演示文稿&#xff0c;办公软件的…

MySQL MVCC详解

目录 前言 MVCC实现原理 UndoLog版本链 ReadView MVCC是否可以解决不可重复读与幻读 隔离级别 READ UNCOMMITTED - 读未提交与脏读 READ COMMITTED - 读已提交与不可重复读 REPEATABLE READ - 可重复读与幻读 SERIALIZABLE - 串行化 小结 前言 为了提高数据库并发能力…

GNSS接收机的工作原理

GNSS接收机的工作原理如下&#xff1a; 信号接收&#xff1a;GNSS接收机通过天线接收来自卫星导航系统的信号&#xff0c;这些信号包含卫星的位置、时间和健康状态等信息。 信号处理&#xff1a;接收的信号首先经过前置放大器放大&#xff0c;然后经过滤波器滤除噪声。接收机会…

邂逅Three.js探秘图形世界之美

可能了解过three.js等大型的3D 图形库同学都知道啊&#xff0c;学习3D技术都需要有图形学、线性代数、webgl等基础知识&#xff0c;以前读书学的线性代数足够扎实的话听这节课也会更容易理解&#xff0c;这是shader课程&#xff0c;希望能帮助你理解着色器&#xff0c;也面向第…

图象去噪1-使用中值滤波与均值滤波

1、中值滤波 使用中值滤波去除图像的异常像素点&#xff0c;使用cv2.cv2.medianBlur(img, 3)表示再图像在中值滤波窗口3*3的范围内&#xff0c;从下到大排序&#xff0c;将当前值替换为排序中值&#xff08;如下图所示&#xff09;将56替换为&#xff08;56&#xff0c;66,90,…

JeecgFlow并行网关概念及案例演示

概念讲解 并行网关能够在一个流程中用于进行并发建模处理&#xff0c;将单条线路拆分成多条路径并行执行&#xff0c;或者将多条路径合并处理。 在一个流程模型中引入并发最直接的网关就是并行网关&#xff0c;它基于进入和外出顺序流&#xff0c;有分支和合并两种行为&#xf…

Android中使用Scroller实现View的弹性滑动

在 Android 开发中&#xff0c;Scroller 类用于实现 View 的弹性滑动效果。它并不会直接滚动 View&#xff0c;而是用于计算滑动的偏移量&#xff0c;然后应用到 View 上。以下是 Scroller 实现 View 弹性滑动的主要步骤&#xff1a; 1. 初始化 Scroller 首先&#xff0c;在自…

想拥有一个独一无二的AI人物?Lora炼丹训练模型教程来啦

之前答应过大家放出来的Lora本地训练教程&#xff0c;终于写好啦。 会训练lora&#xff0c;代表着你可以生成属于你的独一无二的角色。 你可以让这个角色在各种不同背景的地方出现&#xff0c;可以让它摆出各种姿势&#xff0c;满足你的无限幻想。 还有的商家&#xff0c;用…

Centos 7 或 8配置国内yum源及epel源-1

官方教程 Yum工具详解 清理Yum缓存:[rootqfedu.com ~]# yum clean all缓存软件包信息: 提高搜索/安装软件的速度[rootqfedu.com ~]# yum makecache查询yum源信息: [rootqfedu.com ~]# yum repolist 查找软件:[rootqfedu.com ~]# yum search mysql 此命令会搜索到系…

10分钟安装好torch的GPU版本(Windows)

pytorch-gpu 1. 确定cuda版本2. 确定Python版本3 开始下载-cu118-cp383.1 下载cuda3.2 下载torchvision 4.下载好了5.开始安装6. 开始验证 1. 确定cuda版本 nvcc -V 版本为11.8 , 一会下载的版本为cu118 2. 确定Python版本 确定python版本为为3.8&#xff0c;一会下载为cp38 3 …

Java包介绍

今天看jdk文档&#xff0c;顺便写一下java几个包的作用。 java.applet 主要用于创建java applet小应用程序&#xff0c;可以嵌入到网页中能够呈现出特殊的效果&#xff0c;现在基本已经被废弃&#xff0c;很少使用。 java.awt AWT 是Abstract Window ToolKit (抽象窗口工具包…

体验一下 Qwen-Agent

体验一下 Qwen-Agent 1. 什么是 Qwen-Agent2. 安装 Qwen-Agent3. 运行示例一代码4. 运行示例二代码 1. 什么是 Qwen-Agent Qwen-Agent是一个开发框架。开发者可基于本框架开发Agent应用&#xff0c;充分利用基于通义千问模型&#xff08;Qwen&#xff09;的指令遵循、工具使用…