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的更多相关文章

  1. partial function

    [partial function] functools.partial(func[,*args][, **keywords]) Return a new partial object which w ...

  2. 事件处理(Event Handlers) ng-click操作

    事件处理(Event Handlers) ng-click操作 step 10 本文主要通过介绍ng-click方法来对angularjs中的事件处理方法做个了解. 1.切换目录 git checko ...

  3. 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 ...

  4. 1.6.2 Uploading Data with Index Handlers

    1.Uploading Data with Index Handlers 索引处理器就是Request Handlers,用于添加,更新,删除索引中的文档.另外,使用Tika抽取富文档数据,使用Dat ...

  5. react & redux data flow diagram

    react & redux data flow diagram Redux 数据流程图

  6. [转]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 ...

  7. Scala之偏函数Partial Function

    https://blog.csdn.net/bluishglc/article/details/50995939 从使用case语句构造匿名函数谈起在Scala里,我们可以使用case语句来创建一个匿 ...

  8. Python partial function 偏函数

    Partial function 偏函数是将所要承载的函数作为partial()函数的第一个参数,原函数的各个参数依次作为partial()函数后续的参数,除非使用关键字参数. 当函数的参数个数太多, ...

  9. Scala Partial Function从官方文档解析

    A partial function of type PartialFunction[A, B] is a unary function where the domain does not neces ...

随机推荐

  1. POJ Oulipo(KMP模板题)

    题意:找出模板在文本串中出现的次数 思路:KMP模板题 #include<cstdio> #include<cstring> #include<cmath> #in ...

  2. 一筐梨子&amp;一筐水果——协变性(covariant)

    假设突然看见这个问题.我们常常会想当然. 一个梨子是水果,一筐梨子是一筐水果吗? watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXFqMjA2NQ==/f ...

  3. Spring RootBeanDefinition,ChildBeanDefinition,GenericBeanDefinition

    转自:https://blog.csdn.net/joenqc/article/details/68942972 RootBeanDefinition,ChildBeanDefinition,Gene ...

  4. javascript中if条件

    1.布尔变量 true/false 2.数字非0.非NaN/0.NaN 3.对象非null/null.nudefined 4.字符串非空串/空串 if(!!str){ //do something } ...

  5. Android应用开发-小巫CSDN博客client之获取评论列表

    Android应用开发-小巫CSDN博客客户端之获取评论列表 上一篇博客介绍了博文具体内容的业务逻辑实现,本篇博客介绍小巫CSDN博客客户端的最后一项功能.获取评论列表,这个功能的实现跟前面获取文章列 ...

  6. 将exe添加到windows服务中

    mongod --dbpath D:\MongoDB\data --logpath=D:\MongoDB\logs\mongodb.log --install http://www.cnblogs.c ...

  7. Spring-data-redis:特性与实例--转载

    原文地址:http://shift-alt-ctrl.iteye.com/blog/1886831 Spring-data-redis为spring-data模块中对redis的支持部分,简称为“SD ...

  8. jQuery的实现原理和核心

    1.jQuery的实现原理 1)jQuery采用的是构造函数模式进行开发的,jQuery是一个类 2)上面说的常用的方法(CSS.属性.筛选.事件.动画.文档处理)都是定义在jQuery.protot ...

  9. 【例题 6-2 UVA - 514】Rails

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 栈模拟一下就好. 每个输出段后面都有一个空行. 包括最后一个. [代码] #include <bits/stdc++.h> ...

  10. [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 ...