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

IT技术 javascript reactjs express dom ecmascript-6
2021-05-10 07:40:23

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

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

提前致谢!

2个回答

如果您使用基于类的组件,那么您可以使用componentDidMountcomponentWillUnmount分别添加和删除侦听器,如下所示:

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);
    };
  }, []);
}

您可以在 componentDidMount 中添加一个 eventListener 来响应,以便在安装组件时完成。

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