如何在 React 中使用 RXJS fromEvent？

我试图在反应中记录按钮上的点击事件：

const InputBox = () => {
  const clicky = fromEvent(
    document.getElementById('clickMe'),
    'click'
  ).subscribe(clickety => console.log({ clickety }));

  return (
    <button id="clickMe" type="button">
      Click Me
    </button>
  );
};

我收到以下错误“事件目标无效”

设置似乎没问题。如果我更换document.getElementById('clickMe') with document然后它会记录点击次数。但这会记录文档中的任何点击，我只想点击相关按钮。

我尝试使用 ref 代替......

const InputBox = () => {
  const buttonEl = React.useRef(null);

  const clicky = fromEvent(buttonEl.current, 'click').subscribe(clickety =>
    console.log({ clickety })
  );

  return (
    <button ref={buttonEl} type="button">
      Click Me
    </button>
  );
};

...但随后我收到相同的“无效事件目标”错误。

有人可以帮助我理解为什么这是一个无效的事件目标以及如何解决这个问题，以便我可以在反应中使用 fromEvent 。

Update

问题是我在安装反应组件时没有注册可观察的。

如果这样做，卸载时还必须卸载该组件。

这现在对我有用。

const InputBox = () => {
  React.useEffect(() => {
    const click$ = fromEvent(
      document.getElementById('clickMe'),
      'click'
    ).subscribe(clickety => console.log({ clickety }));
    return () => click$.unsubscribe();
  }, []);

  return (
    <button id="clickMe" type="button">
      Click Me
    </button>
  );
};

把它包起来useEffect()那就是 dom 准备好的时候

const InputBox = () => {
  const buttonEl = React.useRef(null);

  useEffect(() => {
    const clicky = fromEvent(buttonEl.current, 'click').subscribe(clickety =>
      console.log({ clickety })
    );

    return () => clicky.unsubscribe();
  }, []);

  return (
    <button ref={buttonEl} type="button">
      Click Me
    </button>
  );
};