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. 【Codeforces Round #453 (Div. 2) B】Coloring a Tree

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从根节点开始. 显然它是什么颜色.就要改成对应的颜色.(如果上面已经有某个点传了值就不用改 然后往下传值. [代码] #includ ...

  2. maven仓库快速镜像

    国内连接maven官方的仓库更新依赖库,网速一般很慢,收集一些国内快速的maven仓库镜像以备用. ====================国内OSChina提供的镜像,非常不错=========== ...

  3. [D3] Animate Transitions in D3 v4

    D3 makes it easy to add meaningful animations to your data visualizations. Whether it’s fading in ne ...

  4. 【LeetCode-面试算法经典-Java实现】【199-Binary Tree Right Side View(从右边看二叉树)】

    [199-Binary Tree Right Side View(从右边看二叉树] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 代码下载[https://github.co ...

  5. Dynamics CRM2016 Web API之Expand related entities &amp; $ref &amp; $count

    本篇介绍两个关于1:N关系中通过主实体取关联子实体的api,这两个api会常常被用到并且比原来的odata方式更加方便.之前假设我们要取主实体下全部的关联实体的记录都是通过Retrieve Multi ...

  6. Oracle自定义类型在C#中调用示例

    1.C#代码: 1)using Oracle.DataAccess.Types; using System; using System.Collections.Generic; using Syste ...

  7. win8.1 “服务器运行失败”的解决方法

    平台:win8.1 SP1 问题:安装QQ安全管家又卸载后出现了奇怪的问题,1.在桌面点右键→个性化时,提示“服务器运行失败”.2.右键点击“这台电脑”,选择“属性”时没有反应.3.开始屏幕里随便选择 ...

  8. Centos NFS 简单设置

    Server 端: NFS的安装配置:centos 5 :yum install nfs-utils portmapcentos 6 :yum install nfs-utils rpcbind vi ...

  9. jmeter--九种定时器介绍(包括思考时间、集合点)

    知识来源:http://www.cnblogs.com/imyalost/p/6004678.html jmeter提供了很多元件,帮助我们更好的完成各种场景的性能测试,其中,定时器(timer)是很 ...

  10. mootools常用特性和示例(基础篇2)

    接着上一篇:mootools常用特性和示例(基础篇1) 1.表单操作 html: <form id="myForm" action="submit.php" ...