React事件处理函数中同时传递event对象和其它参数

1. 没有其它参数的情况

return <a href="https://imooc.com/" onClick={this.clickHandler}>
            click me
       </a>

//当我们没有传任何参数的时候还是可以使用event，即默认追加了一个event参数
clickHandler = (event) => {
        event.preventDefault() // 阻止默认行为
        event.stopPropagation() // 阻止冒泡
}

2. 同时传递event和其它参数

  // 最后追加一个参数，即可接收 event
  clickHandler(id, title, event) {

    console.log(id, title)       // 2 "按钮"
    console.log('event', event)   //event Class {…}

  }
  
  render(){ 
  return(
    <button onClick={this.clickHandler.bind(this,2, '按钮')}>点我</button>
  )
  
  }

console的输出结果截图如下：

3 .箭头函数传参和bind传参两种方式的区别

<button onClick = { (e)=> this.handleClick( id,e ) }></button>
<button onClick = { this.handleClick.bind( this,id ) }></button>

上述两种方式是等价的，分别通过 箭头函数 和 Function.prototype.bind 来实现。

在上面两种情况下，React的事件对象 e 会被作为第二个参数传递。

如果通过箭头函数的方式，事件对象必须显式的进行传递，

而通过 bind 的方式，事件对象以及更多的参数将会被隐式的进行传递。

对比原生js传参可以看我的另一篇文章