[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 ...
随机推荐
- POJ Oulipo(KMP模板题)
题意:找出模板在文本串中出现的次数 思路:KMP模板题 #include<cstdio> #include<cstring> #include<cmath> #in ...
- 一筐梨子&一筐水果——协变性(covariant)
假设突然看见这个问题.我们常常会想当然. 一个梨子是水果,一筐梨子是一筐水果吗? watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXFqMjA2NQ==/f ...
- Spring RootBeanDefinition,ChildBeanDefinition,GenericBeanDefinition
转自:https://blog.csdn.net/joenqc/article/details/68942972 RootBeanDefinition,ChildBeanDefinition,Gene ...
- javascript中if条件
1.布尔变量 true/false 2.数字非0.非NaN/0.NaN 3.对象非null/null.nudefined 4.字符串非空串/空串 if(!!str){ //do something } ...
- Android应用开发-小巫CSDN博客client之获取评论列表
Android应用开发-小巫CSDN博客客户端之获取评论列表 上一篇博客介绍了博文具体内容的业务逻辑实现,本篇博客介绍小巫CSDN博客客户端的最后一项功能.获取评论列表,这个功能的实现跟前面获取文章列 ...
- 将exe添加到windows服务中
mongod --dbpath D:\MongoDB\data --logpath=D:\MongoDB\logs\mongodb.log --install http://www.cnblogs.c ...
- Spring-data-redis:特性与实例--转载
原文地址:http://shift-alt-ctrl.iteye.com/blog/1886831 Spring-data-redis为spring-data模块中对redis的支持部分,简称为“SD ...
- jQuery的实现原理和核心
1.jQuery的实现原理 1)jQuery采用的是构造函数模式进行开发的,jQuery是一个类 2)上面说的常用的方法(CSS.属性.筛选.事件.动画.文档处理)都是定义在jQuery.protot ...
- 【例题 6-2 UVA - 514】Rails
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 栈模拟一下就好. 每个输出段后面都有一个空行. 包括最后一个. [代码] #include <bits/stdc++.h> ...
- [AngularFire 2] Object Observables - How to Read Objects from a Firebase Database?
In this lesson we are going to learn how to use AngularFire 2 to query objects, and read them from t ...