如何在 React onClick 中删除和添加相同的事件侦听器而不是无限地堆叠它们？

Question

我正在尝试在 onClick React 事件中删除和添加相同的事件侦听器，因此当单击目标元素时，事件侦听器会添加到父元素。在下一次点击时它应该被移除而不堆叠。

现在我知道每次点击都会创建一个新函数，因此 add 和 removeEventListener 中的引用不同，这就是它不起作用的原因。

我不知道如何解决它，我将不胜感激。

现在它按预期工作，只有那个事件侦听器不会在下次单击时被删除，它们会叠加...

我要补充一点，它不能用状态和内联样式更改，因为这个元素在 jsx 中不可访问，而是来自外部库的图表中的 svg 元素。

谢谢！

const barClick = (event) => {
    const target = event.target as SVGRectElement;

    // Function to change back
    const changeBack = () => {
      target.style.fill = cvar('colorPrimary');
      console.log('changed');
    };

    // Remove to not stack
    target.parentElement?.removeEventListener(
      'click',
      changeBack
    );

    // Change color
    target.style.fill = cvar('colorSecondary');

    // Add event so color is back to the same once clicked outside
    target.parentElement?.addEventListener(
      'click',
      changeBack
    );
  };

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

根据文档，有一个名为 once 的选项，可以将其添加到 addEventListener 函数中，以便在调用

时自动将其删除

如何在 React onClick 中删除和添加相同的事件侦听器而不是无限地堆叠它们？

How to Remove and Add same event listener in React onClick to not stack them up infinitely?

javascript

events

dom

typescript

reactjs