[React] Pass Data To Event Handlers with Partial Function Application
2017-02-02 17:04
549 查看
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:
We want to change the highlight code to partial applied function:
lib:
Test:
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, 1); const result = inc(2); expect(result).toBe(3); }); test('partial applies the multiple arguments ahead of time', () => { const inc = partial(addThree, 1, 2); const result = inc(3); expect(result).toBe(6); });
相关文章推荐
- FireFox下为元素附加事件并传递参数-addEventListener attachEvent - Pass parameters to event-function
- FireFox下为元素附加事件并传递参数-addEventListener attachEvent - Pass parameters to event-function
- [React] Pass a function to setState in React
- How to pass data to a Flex application using SWFObject 2.0
- Pass data to CGI script and back with jQuery.ajax
- How to plot line chart with Real-time data at Dialog-base application?
- An application sends the WM_COPYDATA message to pass data to another application
- LSH(Learning to Hash with its Application to Big Data Retrieval)
- Using Threading to Build a Responsive Application with Visual Studio 2005
- Unable to find required classes (javax.activation.DataHandler and javax.mail.internet.MimeMultipart). Attachment support is disa
- Using Delegates with Data Readers to Control DAL Responsibility[转]
- ArcGIS Engine中初始化许可常见问题归纳,the application is not licensed to create or modify schema for this type of data
- Effective STL:Item 16: Know how to pass vector and string data to
- DataTemplate Is A Bit Naughtier To Play With
- A new method to develop with ajax application
- user master page with asp:FormParameter , save only blank data to Database MSAccess
- 转贴:Backups with Bacula: A cross-platform system to archive your data
- Introduction to the Data Access Application Block
- Use Thread Local Storage to Pass Thread Specific Data
- SQL Server 2000 錯誤信息Could not continue scan with NOLOCK due to data movement解決之方法