使用addEventListener阻止onClick处理程序

Question

我有一个附有onClick事件的按钮：

<button id="my-button" onClick={myMethod}>
   My button
</button>

我还为此按钮添加了一个事件监听器：

const listener = (e) => {
   // Do something here (or elsewhere) to prevent `myMethod` from being invoked
   console.log('Hello, world!');
}
const options = { capture: true, once: true };
document.getElementById('my-button')
   .addEventListener('click', listener, options);

是否有可能在listener中添加一些方法，所以myMethod被停止被调用？

Answer 1

将React事件处理和原始DOM事件处理相结合通常表明存在更大的设计问题。与另一方发生冲突更是如此。 :-)

话虽如此，React的事件处理程序使用委托，所以标准的e.stopPropagation应该这样做：

const listener = (e) => {
    e.stopPropagation();
    console.log('Hello, world!');
};

例：

function myMethod() {
    console.log("myMethod");
}
const Example = () => <button id="my-button" onClick={myMethod}>
    My button
</button>;

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

const listener = (e) => {
   // Do something here (or elsewhere) to prevent `myMethod` from being invoked
   e.stopPropagation();
   console.log('Hello, world!');
}
const options = { capture: true, once: true };
document.getElementById('my-button')
   .addEventListener('click', listener, options);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

请注意，每次React重新呈现组件时，您都需要重新附加事件处理程序。这是为什么混合这两个系统通常不是您最好的方法的一部分。