web-dev-qa-db-ja.com

Reactに2つのonClick関数を追加する方法

ねえ〜Reactの同じonClickで送信関数とGoogleクリックイベントを発生させようとしています。 Reactでこれを行うにはどうすればよいですか？

これはコードです：

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

これを行うには2つの方法があります。

まず、ES6関数リテラル構文でインラインで定義する2つのステートメントをクリックハンドラーに配置できます。

<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>;
  }
})
8
Buck Shlegeris

あなたはこれを行うことができます

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