handleIncrement = () => {
this.setState({ count: this.state.count + 1});
}
现在我们的函数没有参数，但是现实中的情况往往需要向函数传递参数。举例来说，比如这里我们要处理装有商品的购物车，当我们点击增加按钮的时候，想传入一个商品对象的ID，如何实现呢，早先我们的onClick需要传入一个函数引用，所以我们不能向函数引用传递参数。
解决方法是：我们可以临时创建一个中间方法
handleIncrement = (product) => {
console.log(product);
this.setState({ count: this.state.count + 1});
}
doHandleIncrement = () => {
this.handleIncrement({ id: 1 });
}
render() {
return (
<div>
<span className={this.getBadgeClasses()}>{this.formatCount()}</span>
<button
onClick={this.doHandleIncrement}
className='btn btn-secondary btn-sm'
>
Increment
</button>
{this.state.tags.length === 0 && 'Please create a new tag!'}
{ this.renderTags() }
</div>
);
}
回到浏览器，当我点击增加按钮的时候，就可以看到传入handleIncrement方法的产品号。
这是一种解决方法，但是这写法太乱了。不要写一个方法只是为了传递一个处理参数，好的方法是使用行内函数，onClick属性映射的方法，我们可以简单的，直接把剪头函数传过来。所以我们可以改写成这样：
<button
onClick={ () => this.handleIncrement({ id: 1 })}
className='btn btn-secondary btn-sm'
>
Increment
</button>
当我们渲染一组购物车的商品时，我们的map方法可以访问商品的对象。
这样，我们就不需要再使用中间函数了。
无论何时我们想向事件句柄传递一个参数，就简单传递一个剪头函数，在剪头函数中调用事件句柄并传入参数即可。
