javascript - 我如何在 React 中使用 RXJS fromEvent？

Question

我正在尝试在 React 中记录按钮上的点击事件:

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') 替换为 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>
  );
};

...但随后我遇到了同样的“无效事件目标”错误。

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

---

更新

问题是我在挂载 React 组件时没有注册 Observable。

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

现在这对我有用。

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>
  );
};

Answer 1

将其包装在 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>
  );
};