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, 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);
});
[React] Pass Data To Event Handlers with Partial Function Application
原文：http://www.cnblogs.com/Answer1215/p/6361366.html