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>;
  }
})

Answer 2

你可以这样做

class Mycomponent extends React.component {
 submit(e) {
  //handle event
 }
 render() {
  return <button className={s.button} onClick={this.submit.bind(this)} />
 }
}

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

2 个答案: