[React] Pass Data To Event Handlers with Partial Function Application
In this lesson we’ll see how to pass an item’s id value in an event handler and get the state to reflect our change. We’ll also create a helper function that allows us to use partial function application to clean up the event handler code and make it more “functional”
Previous code:
const ActionBtns = ({ selectedBox, onBtnClick }) => (
<nav className={classnames('nav')}>
<RaisedButton
label="Red"
style={style}
onClick={() => onBtnClick('red', selectedBox)}/>
<RaisedButton
label="Green"
style={style}
onClick={() => onBtnClick('green', selectedBox)}/>
</nav>
);
We want to change the highlight code to partial applied function:
const ActionBtns = ({ selectedBox, onBtnClick }) => {
const setGreenColor = partial(onBtnClick, 'green', selectedBox);
const setRedColor = partial(onBtnClick, 'red', selectedBox);
return (
<nav className={classnames('nav')}>
<RaisedButton
label="Red"
style={style}
onClick={setRedColor}/>
<RaisedButton
label="Green"
style={style}
onClick={setGreenColor}/>
</nav>
);
};
lib:
export const partial = (fn, ...args) => fn.bind(null, ...args);
Test:
import {partial} from '../lib/util'; const add = (a, b) => a + b;
const addThree = (a,b,c) => a + b + c; test('partial applies the first argument ahead of time', () => {
const inc = partial(add, );
const result = inc();
expect(result).toBe();
}); test('partial applies the multiple arguments ahead of time', () => {
const inc = partial(addThree, , );
const result = inc();
expect(result).toBe();
});
[React] Pass Data To Event Handlers with Partial Function Application的更多相关文章
- partial function
[partial function] functools.partial(func[,*args][, **keywords]) Return a new partial object which w ...
- 事件处理(Event Handlers) ng-click操作
事件处理(Event Handlers) ng-click操作 step 10 本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解. 1.切换目录 git checko ...
- iphone dev 入门实例2:Pass Data Between View Controllers using segue
Assigning View Controller Class In the first tutorial, we simply create a view controller that serve ...
- 1.6.2 Uploading Data with Index Handlers
1.Uploading Data with Index Handlers 索引处理器就是Request Handlers,用于添加,更新,删除索引中的文档.另外,使用Tika抽取富文档数据,使用Dat ...
- react & redux data flow diagram
react & redux data flow diagram Redux 数据流程图
- [转]Creating an Entity Framework Data Model for an ASP.NET MVC Application (1 of 10)
本文转自:http://www.asp.net/mvc/overview/older-versions/getting-started-with-ef-5-using-mvc-4/creating-a ...
- Scala之偏函数Partial Function
https://blog.csdn.net/bluishglc/article/details/50995939 从使用case语句构造匿名函数谈起在Scala里,我们可以使用case语句来创建一个匿 ...
- Python partial function 偏函数
Partial function 偏函数是将所要承载的函数作为partial()函数的第一个参数,原函数的各个参数依次作为partial()函数后续的参数,除非使用关键字参数. 当函数的参数个数太多, ...
- Scala Partial Function从官方文档解析
A partial function of type PartialFunction[A, B] is a unary function where the domain does not neces ...
随机推荐
- 【Codeforces Round #453 (Div. 2) B】Coloring a Tree
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从根节点开始. 显然它是什么颜色.就要改成对应的颜色.(如果上面已经有某个点传了值就不用改 然后往下传值. [代码] #includ ...
- maven仓库快速镜像
国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...
- [D3] Animate Transitions in D3 v4
D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in ne ...
- 【LeetCode-面试算法经典-Java实现】【199-Binary Tree Right Side View(从右边看二叉树)】
[199-Binary Tree Right Side View(从右边看二叉树] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 代码下载[https://github.co ...
- Dynamics CRM2016 Web API之Expand related entities & $ref & $count
本篇介绍两个关于1:N关系中通过主实体取关联子实体的api,这两个api会常常被用到并且比原来的odata方式更加方便.之前假设我们要取主实体下全部的关联实体的记录都是通过Retrieve Multi ...
- Oracle自定义类型在C#中调用示例
1.C#代码: 1)using Oracle.DataAccess.Types; using System; using System.Collections.Generic; using Syste ...
- win8.1 “服务器运行失败”的解决方法
平台:win8.1 SP1 问题:安装QQ安全管家又卸载后出现了奇怪的问题,1.在桌面点右键→个性化时,提示“服务器运行失败”.2.右键点击“这台电脑”,选择“属性”时没有反应.3.开始屏幕里随便选择 ...
- Centos NFS 简单设置
Server 端: NFS的安装配置:centos 5 :yum install nfs-utils portmapcentos 6 :yum install nfs-utils rpcbind vi ...
- jmeter--九种定时器介绍(包括思考时间、集合点)
知识来源:http://www.cnblogs.com/imyalost/p/6004678.html jmeter提供了很多元件,帮助我们更好的完成各种场景的性能测试,其中,定时器(timer)是很 ...
- mootools常用特性和示例(基础篇2)
接着上一篇:mootools常用特性和示例(基础篇1) 1.表单操作 html: <form id="myForm" action="submit.php" ...