高阶函数_函数柯里化 以及 setState中动态key
使用柯里化:
1 state = {
2 username: "",
3 password: "",
4 };
5 render() {
6 return (
7 <div>
8 <form action="" onSubmit={this.handleSub}>
9 姓名:
10 {/*因为onchange接受一个函数作为它的回调 onChange={this.handlechange} 这样是吧handlechange这个函数作为回调, 但是 onChange={this.handlechange('username')}需要将handlechange函数的返回值作为onChange的回调 */}
11 <input onChange={this.handlechange('username')} type="text" name="username" />
12 密码:
13 <input onChange={this.handlechange('password')} type="text" name="password" />
14 <button>提交</button>
15 </form>
16 </div>
17 );
18 }
19
20 //高阶函数_函数柯里化
21 handlechange = (type) => {
22 return (e) => { // 返回一个函数作为onChange的回调
23 this.setState({[type]:e.target.value}) //如果key作为变量的话,要这样写
24 }
25 }
26
27 handleSub = (event) => {
28 event.preventDefault(); //因为表单有个action属性,表示提交地址,默认不写绘刷新当前页面,所以说阻止默认事件,我们实际开发中是以ajax请求,做到不刷新页面的
29
30 const { username, password } = this.state;
31 alert(`姓名:${username}, 密码:${password}`);
32 };
不使用 _函数柯里化
state = {
username: "",
password: "",
};
render() {
return (
<div>
<form action="" onSubmit={this.handleSub}>
姓名:<input onChange={(e) => {this.handlechange(e.target.value, 'username')}} type="text" name="username" />
密码:
<input onChange={(e) => {this.handlechange(e.target.value, 'password')}} type="text" name="password" />
<button>提交</button>
</form>
</div>
);
} handlechange = (value, type) => {
this.setState({[type]:value})
}
高阶函数_函数柯里化 以及 setState中动态key的更多相关文章
- Java函数式编程:二、高阶函数,闭包,函数组合以及柯里化
承接上文:Java函数式编程:一.函数式接口,lambda表达式和方法引用 这次来聊聊函数式编程中其他的几个比较重要的概念和技术,从而使得我们能更深刻的掌握Java中的函数式编程. 本篇博客主要聊聊以 ...
- 浅析 JavaScript 中的 函数 uncurrying 反柯里化
柯里化 柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
- 理解运用JS的闭包、高阶函数、柯里化
JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性. 这里就整理一些,做个总结. 一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执 ...
- JS的闭包、高阶函数、柯里化
本文原链接:https://cloud.tencent.com/developer/article/1326958 https://cloud.tencent.com/developer/articl ...
- Python高阶函数及函数柯里化
1 Python高阶函数 接收函数为参数,或者把函数作为结果返回的函数为高阶函数. 1.1 自定义sort函数 要求:仿照内建函数sorted,自行实现一个sort函数.内建函数sorted函数是返回 ...
- 从 ES6 高阶箭头函数理解函数柯里化
前言:第一次看到多个连续箭头函数是在一个 react 项目中,然鹅确认了下眼神,并不是对的人,因为看得一脸懵逼.em......于是开始各种搜索,先是知道了多个连续箭头函数就是 es6 的多次柯里化的 ...
- js高阶函数应用—函数柯里化和反柯里化(二)
第上一篇文章中我们介绍了函数柯里化,顺带提到了偏函数,接下来我们继续话题,进入今天的主题-函数的反柯里化. 在上一篇文章中柯里化函数你可能需要去敲许多代码,理解很多代码逻辑,不过这一节我们讨论的反科里 ...
- js 高阶函数之柯里化
博客地址:https://ainyi.com/74 定义 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且 ...
- swift 学习(二)基础知识 (函数,闭包,ARC,柯里化,反射)
函数 func x(a:Int, b:Int) {} func x(a:Int, b:Int) -> Void {} func x(a:Int, b:Int) ->(Int,Int ...
- 浅析 JavaScript 中的 函数 currying 柯里化
原文:浅析 JavaScript 中的 函数 currying 柯里化 何为Curry化/柯里化? curry化来源与数学家 Haskell Curry的名字 (编程语言 Haskell也是以他的名字 ...
随机推荐
- pageTools 一个复用的通知条
<template> <el-card class="page-tools"> <el-row type="flex" align ...
- 通过右键菜单生成pyd
批处理 @echo off reg add "HKCR\AllFilesystemObjects\shell\构建PYTHON\command" /ve /t REG_SZ /d ...
- PerfDog的使用教程
一.介绍: 移动全平台iOS/Android性能测试.分析工具平台,快速定位分析性能问题.PerfDog支持移动平台所有应用程序(游戏.APP应用.浏览器.小程序.小游戏.H5.后台系统进程等).An ...
- Python第一次作业(20220909)
实例01:根据身高.体重计算BMI指数 ①:分别定义两个变量"height"和"weight",用于储存身高(单位:米)和体重(单位:千克).使用内置的prin ...
- mysql zip安装步骤
1. 官网下载社区版 https://dev.mysql.com/downloads/mysql/ 版本5.7或者8.0 2. 解压到指定的目录. 3.创建my.ini文件,编辑内容: [mysqld ...
- Java方法-什么是方法
Java方法-什么是方法 package com.andy.base.Andy.operator.method; public class Demo01 { //main方法 public stati ...
- Android studio手机界面的显示
终于显示出来啦! 前几天因为SDK的地址错误一直不显示,现在终于显示出来啦! 关于报错原因的话,我也不太清楚是咋解决的,就改了改Android studio软件里面下载SDK的地址,就出来啦!(只要报 ...
- FastCorrect:语音识别快速纠错模型丨RTC Dev Meetup
前言 「语音处理」是实时互动领域中非常重要的一个场景,在声网发起的「RTC Dev Meetup丨语音处理在实时互动领域的技术实践和应用」活动中,来自百度.寰宇科技和依图的技术专家,围绕该话题进行了相 ...
- 记一次winfrom 面板改变背景图片
this.panel1.BackgroundImage = Image.FromFile(@"D:\TestDemo\WindowsFormsApp2\WindowsFormsApp2\黑箭 ...
- golang pprof 监控系列(1) —— go trace 统计原理与使用
golang pprof 监控系列(1) -- go trace 统计原理与使用 服务监控系列文章 服务监控系列视频 关于go tool trace的使用,网上有相当多的资料,但拿我之前初学golan ...