如何在 React 中添加两个 onClick 函数 [重复]答案

【问题标题】：how to add two onClick functions in React [duplicate]如何在 React 中添加两个 onClick 函数 [重复]
【发布时间】：2017-01-22 17:59:01
【问题描述】：

嘿〜我正在尝试在 React 中的同一个 onClick 上触发提交功能和谷歌点击事件。我如何在 React 中做到这一点？

这是代码：

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

【问题讨论】：

为什么不在第一个上调用第二个onClick？

标签： javascript function reactjs onclick google-tag-manager

【解决方案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>;
  }
})

【讨论】：

您好，感谢您的回复。我尝试了您的第一种方法，但它没有提交表单。相反，它会引发错误Uncaught TypeError: Cannot read property 'preventDefault' of undefined
这是提交功能submit (e) { e.preventDefault(); if (this.refs.input.value.length === 5) { this.context.router.push('/where-to-buy/?zip=' + this.refs.input.value); } }
我已经改变了我的答案，所以它应该可以解决这个问题。

【解决方案2】：

你可以这样做

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

【讨论】：