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会重新提供该组件。这就是为什么将这两个系统混合在一起通常不是您最好的方法的原因。

使用addEventListener阻止onClick处理程序

1 个答案: