我如何在 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 替換document document.getElementById('clickMe')然后它記錄點擊。 但這會記錄文檔中的任何點擊，我只想點擊相關按鈕。

我嘗試改用 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。

---

更新

問題是我在安裝反應組件時沒有注冊可觀察對象。

如果這樣做，則在卸載時還必須卸載該組件。

這現在對我有用。

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

我做了幾個假設，希望提出一個更通用的解決方案：

• MouseEvent沒有什么特別之處。 我們試圖擁有一個特定類型的Observable ，由一個組件擁有，以及一種更新它的方法。
• 使用Observable是一個應該與創建它分開的問題，因此它可以傳遞給其他組件，與其他 observable 組合等。
• 使用ref將功能附加到按鈕既令人困惑（因為高度非標准）又不是很靈活（如果您想將該處理程序傳遞到其他地方會發生什么？）

我在片段中結合了兩件事：

• 我在另一個答案中描述的createObservableWithNext function 。 它返回一個Observable和一個next function 來更新它。
• useObservable來自精彩的react-use package。 基本上處理訂閱和取消訂閱 observables。

const FancyButton = () => {
  const { observable, next } = React.useRef(
    createObservableWithNext<MouseEvent<HTMLButtonElement>>()
  ).current;

  const latestClick = useObservable(observable);

  React.useEffect(() => {
    if (latestClick) {
      console.log(`clicked at ${latestClick.pageX} ${latestClick.pageY}`);
    }
  }, [latestClick]);

  return (
      <button onClick={next}>
        Next click
      </button>
  )
};

Answer 3

您是否嘗試過查詢選擇器？ 像這樣

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

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

這對我有用