javascript - 在reactJS方法中取消注册e.preventDefault

Question

我遇到的情况是，我需要在单击链接时触发谷歌分析事件。我为此目的编写了一个处理程序:

handleClick(e){
  e.preventDefault();
  // --------------------------
   GA code ...
  // --------------------------
  // now how can I re-eanble the link
  // e.target.click() and similar methods are not working for me

}

但是在触发 GA 事件后，我找不到一种方法来解除从链接(使用 React 的“link”组件创建)中的 PreventDefault 的绑定(bind)。

任何指示都会有帮助。

Answer 1

您可以尝试更新状态。下面的示例我尝试有条件地附加事件处理程序。我在第一次调用后删除了附加到按钮 onClick 事件的处理程序。

我还尝试过有条件地执行链接的 e.preventDefault。

https://codesandbox.io/s/MQnoVJKJR

import React from 'react';

export default class Hello extends React.Component {
  state = {
    btnClicked: false,
    linkClicked: false,
  };
  constructor() {
    super();
  }
  handleClick(e) {
    e.preventDefault();
    alert('button clicked');
    this.setState({
      btnClicked: true,
    });
  }
  handleLinkClick(e) {
    if (!this.state.linkClicked) {
      e.preventDefault();
    }
    this.setState({
      linkClicked: true,
    });
  }
  render() {
    return (
      <div>
        <div>
          <button
            onClick={!this.state.btnClicked && this.handleClick.bind(this)}> // Binding onClick event to state change

            Click Me
          </button>
        </div>
        <a
          href="https://www.google.co.in"
          target="_blank"
          onClick={this.handleLinkClick.bind(this)}
        >
          Go to Google.com
        </a>
      </div>
    );
  }
}