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

2024-04-12

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

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

提前致谢!


如果您使用基于类的组件,那么您可以使用componentDidMount and 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);
    };
  }, []);
}

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在React中添加事件监听器? 的相关文章

  • 将 FireBug 用于带有框架的网站

    我下载了 Firebug 并尝试使用它来调试使用框架的站点的 JS 我的理解是 当我进入 Firebug 中的 脚本 选项卡时 我会看到 aspx 上的 JS 函数以及包含的任何文件中的 JS 并且我将能够设置断点 然而 我在这个网站上看到
  • 以编程方式在指令内添加指令

    我想将指令的另一个实例附加到父指令中 但我无法使用 apply 重新编译我的指令 我想我在某个地方错过了一些东西 我的 HTML 代码 div div div div
  • AngularJS:选择非 2 路绑定到模型

    我正在使用选择来显示客户名称 用户应该能够选择现有客户端 然后更新范围属性 控制器 初始化 首选 if scope clients length gt 0 scope existingClient scope clients 0 View
  • 我需要一个 jQuery Autocomplete 使用 ajax 返回 id 和 name 的示例

    我需要一个示例 说明如何编写 jQuery 自动完成代码来填充product id 同时显示调用ajax 页面 remote php 的product name
  • Node.js 中没有请求状态 Morgan Logging

    我正在 Azure VM 上运行 node js 应用程序 使用 PM2 处理负载平衡和重新启动 这是服务器设置和日志记录代码 var logger require morgan var app express app set views
  • 如何解构 React props 并仍然访问其他 props?

    我很好奇如果我想要所有的 props 但也想要解构单个属性 那么组件的参数 props 是否可以像导入一样解构 我想这更像是一个 JavaScript 问题 而不是一个 React 问题 但是举个例子 import React useEff
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • Browserify:如果需要,使用 module.exports,否则暴露全局

    我正在考虑采用浏览器化 http browserify org 对于我的一些项目 但想确保其他人如果想使用 捆绑的 代码就不必使用 browserify 执行此操作的明显方法是通过以下方式公开模块导出module exports以及通过一个
  • Angularjs - 将 True/False 显示为 Yes/No

    有没有一种简单的方法可以将真 假值显示为是 否 我正在从数据库检索包含以下内容的 JSON 对象 对象 WithCertification true 这是 HTML 有认证 elem WithCertification 正在显示这个 认证真
  • 我们如何使用 thymeleaf 绑定对象列表的列表

    我有一个表单 用户可以在其中添加任意数量的内容表对象这也可以包含他想要的列对象 就像在 SQL 中构建表一样 我尝试了下面的代码 但没有任何效果 并且当我尝试绑定两个列表时 表单不再出现 控制器 ModelAttribute page pu
  • 运行故事书时出错 - sh: 1: start-storybook: 未找到

    我运行时遇到错误故事书 即使是干净的安装 npm run storybook gt storybook media programmersedge New Volume devs demostorybook gt start storybo
  • 过滤嵌套的 JSON 对象

    我有一个搜索栏 您可以在其中输入员工姓名 它应该根据过滤器返回姓名 我有一个嵌套的 JSON 对象 如下所示 我需要深入了解该对象以访问数组中的员工姓名 您可以看到我尝试实现的多个选项 它们已被注释掉 我的问题是代码没有过滤名称并返回所有名
  • Angular 停止 Enter 键提交

    I am trying to stop the Enter from submitting my button and rather make it point to another function I tried trapping th
  • 动态 dom 操作后,如何在浏览器历史记录中保留 dom 状态?

    是否有一个通用的解决方案来保留 dom 状态 以便当用户使用后退 前进返回页面时 整个页面处于他们离开时的确切状态 这篇文章询问并回答了为什么不同浏览器和不同 javascript 库的行为不一致 Ajax 后退按钮和 DOM 更新 htt
  • 有没有办法从画布上清除一个元素而不消除其他元素?

    我正在使用画布构建页面加载器 并使用 es6 类 虽然目前我无法使其正常工作 原因之一是我找不到清除画布的方法进展 到目前为止 这是我的代码 class Loader constructor width height this width
  • YouTube iFrame Player API 无法在 DOMWindow 上执行 postMessage

    我正在尝试使用以下命令将 youtube 加载到我的网页中YouTube iFrame Player API 并在加载时出现以下错误 Failed to execute postMessage on DOMWindow The target
  • JsGrid 将嵌套对象加载到表中

    我正在 Django 中开发一个 Web 项目并使用 jsGrid 我遇到了问题并且找不到解决方案 我有一个嵌套的 JSON 数据 它是通过组合多个数据库表记录创建的 这是我的 JSON count 3 results personnel
  • 如何在 Twilio 可编程聊天中的单个通道上侦听消息

    Using twilio chat js https www npmjs com package twilio chat如何在单个频道上收听消息 我发现这个问题 https stackoverflow com questions 54687
  • 错误:模块“html”不提供视图引擎(Express)

    我正在尝试设置一个简单的路由应用程序 但在渲染页面时不断遇到错误 Error Module html does not provide a view engine 奇怪的是我已经在 app js 文件中指定了视图引擎 但仍然收到错误 app
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo

随机推荐

  • 包 org.apache.commons.io 不存在错误

    我正在使用 ant 编译器编译 java 文件 我收到以下错误 包 org apache commons io 不存在错误 我下载了 apache Commons IO 二进制文件并将 jar 文件粘贴到 C Program Files J
  • pyshark - 来自 TCP 数据包的数据

    有没有办法使用 pyshark 获取 TCP 数据包的有效负载 我正在尝试比较多个 TCP 流中不同数据包的数据部分 但我找不到获取数据包数据的方法 pkt tcp data似乎不存在 如果您使用的是 pcap 文件 则在使用以下命令读取该
  • Autofixture 测试无效的构造函数参数

    我有以下课程和测试 我想测试将空值作为参数传递给构造函数并期待ArgumentNullException 但由于我使用 AutofixtureCreateAnonymous方法我得到一个TargetInvocationException反而
  • Mac OS 上“导入 cv”期间出现“分段错误”

    尝试在我的 Mac 上从源代码编译 opencv 我有以下 CMakeCache txt http pastebin com KqPHjBx0 http pastebin com KqPHjBx0 I make ccmake press c
  • 如何使用 Mongoid 更新 Rails 中嵌套的 Mongo 文档属性?

    如果这个问题缺乏细节 请提前道歉 我会看评论并添加我能添加的内容 我有一个具有以下内容的模型 class Product include Mongoid Document include Mongoid Timestamps field d
  • 运行模拟器时出错:架构 i386 的重复符号

    我添加了 ShareKit 框架来尝试 这是在模拟器中运行它的错误 duplicate symbol LFHRReadStreamClientCallBack in Xcode DerivedData build Objects norma
  • eclipse 无法删除某些断点

    双击eclipse左侧的蓝色条设置断点 再次双击可删除断点 这对我来说非常有用 但如果我使用 git 来签出不同的分支 通常断点的蓝点会变得 混乱 或其他什么 我无法再双击来取消它们 我被迫进入调试视角 并在 断点 视图中找到断点 然后右键
  • C# 正则表达式匹配带点的单词

    敏捷的棕色狐狸跳过了 懒狗 是英语 全字母表 字母表 也就是一个短语 包含所有字母 字母表 它已被用来测试 打字机字母表 和电脑 键盘和其他应用程序 涉及到所有的字母 英文字母表 我需要得到 字母表 正则表达式中的单词 上面的文字中有3个实
  • Telerik 报告不起作用

    处理报表 ReportStandart 时发生错误 无法建立与数据库的连接 请验证您的连接字符串是否有效 如果您使用应用程序配置文件中的命名连接字符串 请确保名称正确并且连接字符串设置存在于应用程序的配置文件中 内部异常 转到报表项目所在的
  • 从外部 php 系统登录 Odoo

    我有一个要求 我需要从外部 php 系统重定向到 Odoo 并且用户也应该登录 我想到了以下两种方法来完成此任务 来自 php 端的 url 重定向 它调用特定的控制器 并沿着 url 传递凭据 由于显而易见的原因 这不是一个安全的选项 从
  • 程序中出现了“\303”和“\215”——为什么? [复制]

    这个问题在这里已经有答案了 而不是我发现的程序中的杂散 302 here https stackoverflow com questions 5167656 error stray 302 in program 我收到错误消息 algo c
  • 获取公共 Google 文档文件的下载链接

    正在阅读谷歌文档 API http code google com apis documents docs 3 0 developers guide protocol html DownloadingFiles我发现这个 正在下载 无法以其
  • 为什么我们需要结构体? (C#)

    要使用结构体 我们需要实例化该结构体并像使用类一样使用它 那我们为什么不首先创建一个类呢 结构是一种值类型 因此如果您创建副本 它实际上会物理复制数据 而对于类 它只会复制对数据的引用
  • Firebase 无法在 Android Studio 模拟器上运行

    我当时正在做一个学习项目 一切都工作正常 但我将操作系统更改为 win11 同时擦除了所有以前的数据 现在 在使用任何类型的登录后 Firebase 都会停留在 正在加载 状态 实时数据库数据也不会显示 等待大约 5 10 个小时后 身份验
  • 从 Intellij 在远程主机上部署/运行 jvm 应用程序

    是否可以在 intellij 的远程服务器上部署 运行 出于测试目的 独立的 Java 应用程序 我并不是要连接到已经运行的 JVM 而是要从 intellij 在远程主机上启动一个新的 JVM 就像它在我的本地计算机上运行一样 目前没有内
  • python:如何重建需要编译的依赖项

    由于存在大量依赖项 我的 python 应用程序的虚拟环境的安装在部署过程中花费了太多时间 为了最大限度地减少时间 我想将驻留在 git 虚拟环境中的依赖项包括在内 以便它们在部署时就已经存在 主要问题是 由于机器之间的架构差异 需要重建与
  • 角度/形式整数验证器

    如何验证我的数字输入字段仅接受整数而不接受任何类型的小数 逗号 点 Code Component import FormGroup FormBuilder Validators from angular forms this savingD
  • NPM 如何更新/升级传递依赖?

    我在我的节点服务器中使用express v4 16 4 它已引入 cookie signature v1 0 6 我想将 cookie signature 升级到 v1 1 0 因为它有我需要的修复 有什么方法可以做到这一点 我认为我不应该
  • Charles Proxy:映射到 GET 请求而不是 OPTIONS [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 有没有办法根据特定请求在 Charles 中进行本地映射 我的 API 发出 OPTIONS 请求 然后发出 GET 请求 当我在 Cha
  • 如何在React中添加事件监听器?

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