如何在React中添加两个onClick函数

Question

嘿〜我正在尝试在React上的同一个onClick上触发提交功能和谷歌点击事件.我如何在React中执行此操作？

这是代码:

<button className={s.button} onClick={this.submit} onClick={ () => {gaClickEvent('where-to-buy', 'submit' , undefined)}}>

Answer 1

有两种方法可以做到这一点.

首先,您可以在使用ES6函数文字语法内联定义的单击处理程序中放置两个语句.

<button 
  className={s.button}
  onClick={ (e) => {
    gaClickEvent('home-where-to-buy', 'submit' , undefined);
    this.submit(e);
  }} >

但这是稍微多一点的代码,我可以放在onClick处理程序中.如果我是你,我会将这个逻辑分离到组件的处理程序方法中.例如:

var MyComponent = React.createClass({
  handleClick () {
    gaClickEvent('home-where-to-buy', 'submit' , undefined);
    this.submit();
  },
  render () {
    return <button 
      className={s.button}
      onClick={(e) => this.handleClick(e)} >
      I am a button!
      </button>;
  }
})