Passing Event Arguments(传递事件参数）

    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方法可以访问商品的对象。
这样，我们就不需要再使用中间函数了。
无论何时我们想向事件句柄传递一个参数，就简单传递一个剪头函数，在剪头函数中调用事件句柄并传入参数即可。