Javascript 如何在React中使用RXJS fromEvent？

我正在尝试在react中的按钮上记录单击事件：

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

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

…但我得到了相同的“无效事件目标”错误

有人可以帮助我理解为什么这是一个无效的事件目标，以及如何修复它，以便我可以在react中使用fromEvent

更新

问题是我在安装react组件时没有记录可观察到的内容

如果执行此操作，还必须在卸载时卸载组件

这对我现在有用

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

将其包装为useffect，这就是dom准备就绪的时间

常量输入框==>{ const buttonEl=React.useRefnull； useEffect=>{ const clicky=fromEventButtonnel.current，'click'。subscribeclickety=> console.log{clickety} ; return=>clicky.unsubscribe； }, []; 回来 点击我 ; };

---

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

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

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

---

这对我来说很有效

注册时DOM上的按钮还没有打开吗？在ComponentDidMount中注册侦听器这很有效，谢谢。不需要使用参照，使用Id选择器。对于遵循这一点的其他人，您只需要注册onMount，因此保持依赖性数组为空，而不是在每个渲染上挂载。const InputBox=>{React.useffect=>fromEventdocument.getElementById'clickMe'，'click'。订阅clickety=>console.log{clickety}，[]；返回clickMe；}；。。。另外，不要忘记取消订阅“``const InputBox==>{React.useffect=>{const click$=fromEvent document.getElementById'clickMe'，'click'.subscribeclickety=>console.log{clickety}；return=>click$.unsubscribe；}，[]；return clickMe；}```你也可以使用主语。我不想使用主语，因为这会迫使你弄乱你的可观察对象的内部结构并处理你自己的错误。我更喜欢一个现成的解决方案。查询选择器会破坏这一点，那就是注册任何按钮。我想要那个特定的按钮。这只是一个使用useEffect安装的例子，使用getElementById工作得很好。除了将侦听器附加到某些按钮（可能不是此按钮）之外，这也是有问题的，因为它没有考虑React的渲染生命周期：这在第一次渲染期间/之后不会附加侦听器，尽管它应该在第二次渲染期间附加侦听器，并且会导致第二次渲染之后每个渲染的订阅重复。

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

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