React/JSX 没有使用我的 onClick 处理程序，而基本的 HTML 可以

Question

当我点击 span 时，我希望用户停留在当前页面

这个是常规的HTML（有效）：

<a href="https://google.fr">
  Go to google
  <span onclick="console.log('toto'); return false;">
    | Stay on current page
  </span>
</a>

但是，对于这个 React 16.2 版本，google link 在 span 之前捕获事件：

const Link = () =>
  <a href="https://google.fr">
    Go to google
    <span onClick={(e) => {console.log('toto'); return false;}}>
      | Stay on current page
    </span>
  </a>;

ReactDOM.render(<Link />, document.getElementById('root'));

你知道怎么解决吗？（以及为什么会发生）

Answer 1

Synthetic Events

As of v0.14, returning false from an event handler will no longer stop event propagation. Instead, e.stopPropagation() or e.preventDefault() should be triggered manually, as appropriate.

const Link = () =>
  <a href="https://google.fr">
    Go to google
    <span
      onClick={e => {
        e.preventDefault(); // for good measure
        e.stopPropagation();
        console.log('toto');
      }}
    >
      | Stay on current page
    </span>
  </a>;

Answer 2

在此示例中，应用 Drew Reese 解决方案有效。然而，在真正的应用程序中（混合反应 16.2/angular 环境），angular 在 React 发出其合成事件之前捕获本机客户端事件。

我必须使用引用来处理本机 dom 事件。

class Link extends React.Component {
  componentDidMount() {
    this.ref.addEventListener('click', e => { 
      e.preventDefault();
      e.stopPropagation();
    });
  }
  
  render() {
    return (
      <a href="https://google.fr">
        Go to google
        <span ref={(ref) => {this.ref = ref}}>
          | Stay on current page
        </span>
      </a>
    );
  }
}

React/JSX 没有使用我的 onClick 处理程序，而基本的 HTML 可以

React/JSX not taking my onClick handler whereas basic HTML does

event-handling

jsx

reactjs