程序员经验分享-hwhale

带钩子的 React-Table 失去了对表内输入的关注？

2024-03-26

代码沙盒：https://codesandbox.io/embed/react-table-editable-content-ggvcy https://codesandbox.io/embed/react-table-editable-content-ggvcy

当尝试处理 React-table 的输入时，我的输入失去焦点，因此我一次只能输入 1 个字符。

如何修复渲染周期以允许输入？

编辑：我不小心用代码的工作版本更新了沙箱，尽管它还有另一个错误：由于关注模糊变化，如何在刷新期间捕获反应事件？ https://stackoverflow.com/questions/57435242/how-to-capture-react-events-during-a-refresh-update-due-to-a-focus-onblur-change


这个问题非常狡猾：当您将“Cell”渲染道具传递给react-tables时，它将被视为react组件。这意味着他们会像这样使用：<Cell ... />. See https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/utils.js#L208 https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/utils.js#L208 and https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/index.js#L541 https://github.com/tannerlinsley/react-table/blob/v6.9.2/src/index.js#L541

这意味着，在每次渲染时，您将创建一个新的成分renderEditable 因此当显示发生变化时，旧的 renderEditable 会被卸载，新的会取代它的位置。这是不幸的，因为内部输入会失去焦点。

你可以做的就是使用旧版本（没有钩子），如下所示：https://github.com/tannerlinsley/react-table/blob/8b07b2c84e0ee29e0ecaa4fe23e96e864ab806a9/archives/v6-examples/react-table-editable-content/src/index.js https://github.com/tannerlinsley/react-table/blob/8b07b2c84e0ee29e0ecaa4fe23e96e864ab806a9/archives/v6-examples/react-table-editable-content/src/index.js

或者像这样一直使用钩子：https://github.com/tannerlinsley/react-table/blob/5145a632c944d135863d8a2f14a160a2f9395f61/examples/editable-data/src/App.js https://github.com/tannerlinsley/react-table/blob/5145a632c944d135863d8a2f14a160a2f9395f61/examples/editable-data/src/App.js

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

ReactJS

reactHooks

reacttable

带钩子的 React-Table 失去了对表内输入的关注？ 的相关文章

  • JSX 中的混合运算符

    我想在 JSX 中使用混合运算符 例如 datas datas map function data i return

  • React Native 运行保持在 IDLE 状态

    这是我第一次设置 React NativeUbuntu 18 04 LTS 我已经完成设置 并且尝试使用以下命令在设备上运行该应用程序react native run android命令 这是我在终端中得到的输出 ron lenovo re

  • Next JS - 源代码中缺少元标签

    我安装了多个元标记 例如标题 描述 关键字等 但是 它没有在查看源代码中显示这些标签 因此 Facebook 共享卡无法正常工作 我已经安装了og标签 但在 Facebook 上似乎找不到它们Scraper或我的查看来源 然而 它填充在客户

  • 禁用 create-react-app 提供的 ESLint

    create react appv3 0 0 已发布 https github com facebook create react app blob master CHANGELOG md 它内部支持 TypeScript linting

  • 使用材质 UI 更改反应选择中的禁用属性

    我正在尝试使用材料用户界面更改反应应用程序中选择按钮单击的禁用属性 我的按钮代码是

  • 如何使用函数组件和 React Router v5 拦截 React SPA 中的后退按钮

    我正在 React 中的 SPA 中工作 不使用 React Router 来创建任何路由 我不需要允许用户导航到特定页面 想想多页调查问卷 按顺序填写 但是 当用户按下后退按钮时在浏览器上 我不希望他们退出整个应用程序 我希望能够在用户按

  • 让Webpack不捆绑文件

    所以现在我正在使用一个原型 我们使用 webpack 用于构建 tsx 文件和复制 html 文件 和 webpack dev server 之间的组合来提供开发服务 正如您可以假设的那样 我们也使用 React 和 ReactDOM 作为

  • 如何使用 JSX 和 Lodash 重复一个元素 n 次

    我在我的应用程序中使用 React JSX 和 Lodash 来实现我想要的 我需要根据条件重复某个元素一定次数 我该怎么做呢 这是元素 span span 我这样分配它 let card if data hand 8 or more ca

  • 如何使用 Next Script 精确控制脚本标签的插入位置

    我目前正在尝试将第三方脚本添加到我的 Next js 应用程序中 该脚本会在脚本标签正下方插入一个 iframe 所以我需要精确控制脚本标签在页面上的位置 我目前正在使用下一个 脚本 https nextjs org docs api re

  • React 无法识别 DOM 元素上的 `isActive` 属性 - styled-components

    我有以下内容svg我传递道具的组件 import React from react export default props gt

  • 如何使用 ReactJS 使表中的列可以以两种方式排序

    我正在 ReactJS 中构建一个简单的应用程序 它通过调用某个 API 来使用 JSON 数组 然后我将数组的结果填充到表中 我现在想让表的列可排序 我理想的情况是同时进行升序和降序排序 一旦我单击标题 当它按升序排序时 它应该按降序排序

  • 无法验证 CSRF 令牌的真实性 Rails/React

    我的 Rails 应用程序中有一个 React 组件 我正在尝试使用它fetch 发送一个POST对于我在本地主机上托管的 Rails 应用程序 这给了我错误 ActionController InvalidAuthenticityToke

  • 在 React.js 中有条件地设置 html 属性

    我在为 React 中的单选按钮组件设置默认选项时遇到了令人惊讶的困难 这是我的RadioToggle成分 jsx React DOM var RadioToggle React createClass render function va

  • React Router 总是将我重定向到不同的 url

    我是 React 和 React Router 的新手 我正在使用 React Router v4 并遵循基于以前版本的教程 但我让它工作了 使用在 SO 上找到的一些东西和 React Router v4 文档上的一些东西 但有一件事困扰

  • 发生错误。", ExceptionMessage: "提供的 'HttpContent' 实例无效

    尝试将文件添加到 http 休息调用时出现此错误 responseJson 消息 发生错误 ExceptionMessage 提供了无效的 HttpContent 实例 它确实 正在使用 多部分 参数名称 内容 异常类型 System Ar

  • Recoil 中的动态原子键

    我正在尝试创建一个动态表单 其中表单输入字段是根据 API 返回的数据呈现的 由于atom需要有一个唯一的键 我尝试将它包装在一个函数中 但是每次我更新字段值或重新安装组件 尝试更改选项卡 时 我都会收到一条警告 我在这里做了一个小的运行示

  • 监听 redux 动作

    我想创建一个可重用的 redux 表模块 它将存储和更新页码 显示的总页数等 我可以在所有页面之间共享这些模块 但是 我需要更新操作来触发刷新数据操作 该操作将根据页面到达不同的端点 因此 可能类似于页面特定的监听 RefreshData

  • 向 ReduxReducer 添加回调

    是否有任何错误 反模式 就 React Redux 中的思考 中添加了一个回调action data转化为行动 reducer ACTION FOR REDUCER var x 123 if action data callback act

  • 如何解构 React props 并仍然访问其他 props？

    我很好奇如果我想要所有的 props 但也想要解构单个属性 那么组件的参数 props 是否可以像导入一样解构 我想这更像是一个 JavaScript 问题 而不是一个 React 问题 但是举个例子 import React useEff

  • 过滤嵌套的 JSON 对象

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

随机推荐

  • Python 的 time.clock() 与 time.time() 的准确性？

    Python 中计时用哪个更好 time clock 还是 time time 哪一个提供更高的准确性 例如 start time clock do something elapsed time clock start vs start t

  • Google App Engine 始终开启功能

    有人可以解释一下 Google App Engine 中的 始终开启 功能是什么吗 它有什么用 举例说明将不胜感激 始终开启功能是否适用于任务队列 基本上 Google 会在没有流量时关闭应用程序引擎应用程序实例 通过此功能 您可以支付额外

  • 在reactJs中添加动态状态

    我创建了一个 ReactJs 页面 允许管理员将用户添加到平台 现在 管理员可以在提交表单之前添加尽可能多的用户 而不是为每个新用户提交表单 默认情况下 会显示一个包含输入字段的表行 然后单击 添加 按钮 会添加一个新行 管理员可以填写必要

  • 在 rspec 测试中发布到不同的控制器

    如何发布到与测试脚本当前指向的控制器不同的控制器 例子 在 user controller spec rb 中 it should just post to users do post create params this goes to

  • 运行maven时禁止Jasper库下载：mvn package

    我正在下载 Intellij Idea 中的 Spring 项目所需的所有库 我正在使用maven mvn包 除了被禁止的库之外 所有库都成功了 ERROR Failed to execute goal on project remax s

  • 当缓冲区只读时定义键

    当我的缓冲区是只读的 是的 我很懒 时 我尝试以与 C n 和 C p 相同的方式使用键 n 和 p 我在 emacs 文件中使用此代码 when buffer read only local set key n next line whe

  • CefSharp ChromiumWebBrowser - 未显示/渲染

    我有一个简单的应用程序 Grid with a ChromiumWebBrowser里面 当我创建ChromiumWebBrowser在 XAML 中 它可以工作 但是当我从代码隐藏创建它并将其添加到网格时 它不会显示 我只得到网格的黑色背

  • 仅从datetime sql获取日期而不转换为varchar，以便我可以在excel中对其进行排序

    当前 sql 返回日期为 2013 07 01 00 00 00 000 我只想要 mm dd yyyy 格式的日期部分 这样当我将其导出到 Excel 时 我仍然可以根据升序或降序进行排序 我尝试了 varchar 但它没有在 Excel

  • 限制代理可以建立的链接数量

    我有乌龟链接 如果它们的 var1 具有相同的值 这很好 我想将链接数量限制为三个 我在代码的链接部分之前添加了一个 IF 语句 If count my links lt 3 但不起作用 代理继续链接超过我设置的最大值 我读了另一个问题如何

  • 是否可以使用 PIL 减少图像的深度？

    是否可以使用 PIL 减少图像的深度 比如说从常规 8bpp 变为 4bpp 您可以轻松转换图像模式 只需调用im convert newmode 在图像对象上im 它会给你一个新的所需模式的新图像 但没有 4bpp 的模式 列出了支持的模

  • Angular2-mdl 和 webpack

    我已按照以下位置提供的步骤进行操作https www npmjs com package angular2 mdl https www npmjs com package angular2 mdl并使 Angular2 mdl 完美工作 但

  • 如何获取 Kotlin AST？

    我有一个包含 Kotlin 源代码的字符串 如何在运行时编译它并获取抽象语法树和类型信息进行分析 我对 Kotlin 编译器进行了一些调查 一些获得 AST 的概念证明可以在我的网站上看到GitHub 仓库 https github com

  • 使用 Microsoft Git Provider 时，为什么无法在 Visual Studio 2012 的 TFS 插件中查看工作平面？

    自从我安装了微软 Git 提供商与我托管的 Git 控制的 项目完全集成tfs visualstudio com the My Work窗格上的VS2012 的 TFS 插件 顺便说一句 我正在使用VS2012 Ultimate 不再出现

  • 如何在用户触摸图像时擦除图像的一部分

    我的总体目标是在图像上有一个灰色区域 然后当用户摩擦该灰色区域时 它会显示下面的图像 基本上就像一张彩票刮刮卡 我已经在文档和该网站上进行了大量搜索 但找不到解决方案 以下只是测试根据用户触摸位置 擦除 图像的概念证明 但它不起作用 我有一

  • 使用 OTP 原理的非阻塞 TCP 服务器

    我开始学习 Erlang 所以我尝试写 hello world 并发编程 IRC 机器人 我已经使用 Erlang 编写了一个 没有任何 OTP 细节 管理程序 应用程序等行为 我希望使用 OTP 原则重写它 但不幸的是我无法找出使用 OT

  • Javascript 不会加载到 ajax div 中

    我有一个非常简单的 ajax 脚本 用于将 HTML 文件加载到 div 中 该脚本如下所示

  • Java Swing 计时器和动画：如何将它们组合在一起

    我将再次重新发布这个问题 试图更准确 并希望我能得到一些帮助 因为这让我发疯 我正在开发一款最多 6 名玩家的棋盘游戏 每个玩家都有一个不同颜色的棋子 我将以下图像加载到 BufferedImage 数组中 并将其视为精灵 这是相关代码 将

  • ASP.NET 如何在其通用错误处理程序中获取行号

    每个人都熟悉 ASP NET 的默认错误处理程序 黄色框包含源错误 发生错误的 5 行代码 和源文件 文件名和行号 如下所示 Source Error Line 48 public ActionResult TriggerException

  • 如何在 firebase 版本 9 (firebase v9) 中初始化 firebase？

    我曾经使用此方法初始化我的 firebase 应用程序 import firebase from firebase app import firebase auth const config apiKey process env NEXT

  • 带钩子的 React-Table 失去了对表内输入的关注？

    代码沙盒 https codesandbox io embed react table editable content ggvcy https codesandbox io embed react table editable conte

热门标签