如何在 React 中添加事件监听器？

Question

我正在使用用户和代理创建一个聊天应用程序。 当代理在他单独的 Rainbow UI 上回复时，我正在尝试检索消息。 问题是这只能通过文档中所示的事件侦听器来完成。 有人可以帮助我，我可以在哪里以及如何在 React 中document.addEventListener .addEventListener？

注意：getMessageFromConversation() api 不起作用，因为默认情况下，一旦看到完整的消息历史记录，调用此 api 将返回错误。 我试过了。

提前致谢！

Answer 1

如果您使用的是基于 class 的组件，那么您可以使用componentDidMount和componentWillUnmount分别添加和删除监听器，如下所示：

class Hello extends React.Component {
  doSomething = () => {}

  componentDidMount() {
    window.addEventListener('scroll', this.doSomething)
  }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.doSomething)
  }
}

如果您使用钩子，那么您可以使用useEffect添加和删除监听器，如下所示：

function Hello() {
  useEffect(() => {
    const doSomething = () => {};

    window.addEventListener("scroll", doSomething);
    return () => {
      window.removeEventListener("scroll", doSomething);
    };
  }, []);
}

Answer 2

您可以在 componentDidMount 中在 react 中添加一个 eventListener，以便在安装组件时完成。

componentDidMount() {
    document.addEventListener(...)
}