如何在 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>
  );
};

...但是我得到相同的“无效事件目标”错误。

谁能帮我理解为什么这是一个无效的事件目标以及如何解决这个问题，以便我可以在反应中使用 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>
  );
};

Answer 2

您是否尝试过查询选择器？ 像这样

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

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

这对我有用