与 React 一起使用时如何检测 keyPress 上的“Enter”键

2024-03-21

我正在使用 ReactJs 来开发我的应用程序。我试图通过处理 onKeyPress 事件在按下 Enter 时提交输入文本。它检测其他输入,但不输入。我尝试过不同的方法——event.key, event.charCode, event.keyCode, event.which……似乎没什么作用。

React.createElement("input", {tabIndex: "1", onKeyPress: this.handleKeyPress, onChange: this.handleChange, 
                           placeholder: "ex: 1,10,15"}), 

handleChange: function (event) {
        this.setState({userInputBuckets: event.target.value});
    },
handleKeyPress: function (event) {
        if (event.charCode == 13) {
            event.preventDefault();
            this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
        }
    },

我也尝试过onKewDown处理时,它会检测到正确的键,但即使它评估,它也不会执行 if 块event.keyCode == 13是真的。


Move e.stopPropagataion from handleSubtotalBy into handleKeyPress:

handleKeyPress(event) {
  if (event.charCode == 13) {
    event.preventDefault();
    event.stopPropagation();
    this.props.table.handleSubtotalBy(this.props.columnDef, this.state.userInputBuckets);
  }
}


handleSubtotalBy(columnDef, partitions) { 
  const subtotalBy = this.state.subtotalBy || [];
  // ...
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

与 React 一起使用时如何检测 keyPress 上的“Enter”键 的相关文章

随机推荐

  • ConditionalAttribute 和其他特殊类

    The ConditionalAttribute可用于根据定义的编译器符号删除对标记方法的调用 我假设我们无法自己创建此类 因为编译器必须专门寻找它 我想知道编译器或语言使用的其他类是我们无法自己编写的 除了提到的那些之外 Attribut
  • puppeteer 通过启用 cookie 和 Javascript 绕过 cloudflare

    仅在 NodeJs gt 服务器端 我正在做一些网页抓取 一些页面受到 cloudflare anti ddos 页面的保护 我正在尝试绕过此页面 通过搜索 我发现了很多关于隐身方法或 reCapcha 的文章 但问题是 cloudflar
  • 如何从根 Angular 对象获取 $rootElement

    我的目标是找到任意 Angular 项目中的根元素 如果我所拥有的只是angular目的 这显然不太合规 所以一个破解的解决方案就可以了 我的第一个方法是find ng app 但这在引导应用程序上失败 我一直在尝试各种角度模块 但陷入了僵
  • MongoDB 如何查找哪个多边形包含指定点?

    我将许多多边形插入MongoDB 2 4 8 并希望找到指定点所在的多边形 这似乎是一个常见问题 但在阅读了谷歌的所有文档后 我没有得到结果 所以提出这个问题 e g db addr poly insert loc type Polygon
  • 我们可以在 标签内添加

    当我在锚标记内编写 html 代码时 我的 Dreamweaver 编辑器在锚标记中显示错误 不应该使用内部标签吗 编写 使用标签有什么规则吗 我正在使用 Html 5 这是我的代码 http jsfiddle net CfPnj http
  • 如何根据Json反序列化JArray数据创建DataTable?

    我有以下 JArray 数据 我需要根据 Jarray 中的列名动态创建一个数据表 然后我需要插入数据 你能帮我做这个手术吗 pre PID 3 FirstName parveen LastName a Gender male PID 8
  • 尝试升级到 1.22 时 MediaWiki DB 连接错误

    我在共享主机服务器上安装了 MediaWiki 它的版本是 1 19 1 我正在尝试更新到 1 22 2 文档表明一步更新应该可以解决此问题 我已经在过去的更新中成功完成了几次此操作 并且正在遵循以前的注释 我建立了一个新目录 其中包含1
  • 将 .keystore 转换为 .jks 以签署 apk

    我有一个 Android 应用程序 我试图使用 quixxi com 来保护它 但它要求我再次签署该应用程序 但要做到这一点 它必须使用 jks 文件 但我的密钥库是 keystore 我在 C 中使用 Xamarin Android 和
  • 想要隐藏 Jackson 映射到 JSON 的对象的某些字段

    我有一个 User 类 我想使用 Jackson 将其映射到 JSON public class User private String name private int age private int securityCode gette
  • 如何阻止链接在 Gmail 的集成迷你浏览器中打开

    在 Android 上 当用户使用 Gmail 打开邮件并单击邮件中包含的链接时 该 URL 会在某种 迷你浏览器 中打开 顶部有一个特殊的栏 就我而言 URL 是可移植 Web 应用程序 PWA 应在 Chrome 浏览器本身中打开 使用
  • CardLayout 中的可滚动 JPanel?

    我一直在寻找一种方法来添加垂直滚动条JPanel依次添加到CardLayout控制板 我查找了这里所有与实现可滚动相关的帖子JPanel但我不知道如何用这个特定的方法来实现它CardLayout Oracle 也没有给出我可以使用的示例 也
  • sparql 主题的完整树

    例如 当我有一个人图时 例如约翰和约翰有工作地址 家庭地址 电话号码 关系等 是否有可能在不知道它是什么的情况下检索与 john 及其子类相关的所有内容 这样我就可以检索例如以下内容 John lt address lt house num
  • 为什么 ++x 是左值而 x++ 是右值? [复制]

    这个问题在这里已经有答案了 所以我一直在阅读左值和右值 我对两者之间的区别有点困惑 x and x 当谈到这个分类时 Why is x左值和x 右值 x返回对您增加的对象的引用 其中x 返回一个临时副本x的旧值 至少这将是按照惯例实现这些运
  • Android WebView Java-Javascript 桥接器

    我想知道是否可以从Java代码中获取Javascript变量值 换句话说 我在 WebView 中有 JS 代码 并且我需要能够从 WebView 的 JS 代码获取变量 是的 可以通过安装 Java JS 桥 然后将 JS 注入到收集数据
  • 非常纠结 cocoapods / ruby​​ 设置

    这工作正常 然后突然就不行了 我希望我知道为什么 真的卡住了 在网上找不到任何东西 我正在开发一个 ObjectiveC 项目 我尝试用以下方法重置一切 sudo gem uninstall ruby sudo gem uninstall
  • 实体框架花费大量时间初始化模型

    我面临 EF 花费大量时间 跨越数小时 来初始化模型的问题 该模型如下所示 大约有 20 个类从 A1 派生 大约 30 个类从 A2 派生 我必须从 TPT 战略转向 TPH 战略解决问题 https stackoverflow com
  • Swift 中的 NSExpression 计算器

    我正在尝试复制需要用Objective C写计算器 https stackoverflow com questions 15090475 need to write calculator in objective c在 Swift 中 但我
  • 使用 ArrayList 将文本文件拆分并存储到数组中

    我一直在开发一个测验应用程序 它使用文本文件来存储问题 问题的格式如下 QUESTION CHOICE A CHOICE B CHOICE C CHOICE D ANSWER 我希望它读取每一行并将其分成 6 个不同的部分 作为分割字符串并
  • 为什么这个 Flexbox 布局在 Safari 中会被破坏?

    所以我在 CSS 中设计了这个 想法是有一个标题 其余部分作为可滚动内容 有一个链接到现场演示在底部 Alas in Safari it is broken and looks like this 可以看到 表头的高度计算错误 导致绿框溢出
  • 与 React 一起使用时如何检测 keyPress 上的“Enter”键

    我正在使用 ReactJs 来开发我的应用程序 我试图通过处理 onKeyPress 事件在按下 Enter 时提交输入文本 它检测其他输入 但不输入 我尝试过不同的方法 event key event charCode event key