如何在 React 中使用 RXJS fromEvent？

Question

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

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

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

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

---

更新

问题是我在安装反应组件时没有注册 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>
  );
};