Как использовать RXJS fromEvent в React?

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, то он регистрирует клики. Но это регистрирует любой клик в документе, и я просто хочу, чтобы клики на соответствующей кнопке.

Я попытался использовать ссылку вместо ...

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 в реакции.

---

Обновление

Проблема заключалась в том, что я не зарегистрировал наблюдаемое при монтаже реагирующих компонентов.

Если вы это сделаете, вы также должны отключить компонент при размонтировании.

Теперь это работает для меня.

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(), когда дом будет готов

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

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

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

это работает для меня