问题标签 [react-data-grid]

目标：使用反应数据网格自定义编辑器为语义日历日期选择器启用键盘导航

内置演示：日期选择器的第三列 https://codesandbox.io/embed/8l4jkor19

当前行为：

• 双击日期单元格弹出日历
• 按键盘箭头键并更改所选单元格，日历消失

想要的行为：

• 双击日期单元格弹出日历
• 按在日历日期上导航的键盘箭头键，然后按 Enter 选择

官方示例：先输入单元格 https://arfedulov.github.io/semantic-ui-calendar-react/

问：有没有人遇到过类似的情况？不完全知道问题发生在哪里以及如何调查。非常感谢

目标：目前使用反应数据网格，我想使用日期选择器（自定义编辑器）将用户输入保持在统一的 MM/DD/YYYY 中，以及用户浏览器区域设置中的格式（自定义格式化程序），是否有可能实现。

（如果我以日期选择器格式转换，我可能需要修改后端。）

我对这篇文章进行了一些研究Using react-datepicker in react-data-grid compoent 格式化程序不能与编辑器一起使用仍然是真的吗？

这是我构建的演示：https ://codesandbox.io/embed/8l4jkor19

到目前为止，我无法让格式化程序工作。

任何意见将不胜感激！

经过一番调查，我认为可能会出现问题，因为反应数据网格专注于单元格并且即使日历弹出也没有改变。但是，许多示例都使用焦点输入，不知道如何调整代码并使其正确聚焦

目标：使用反应数据网格自定义编辑器为语义日历日期选择器启用键盘导航

内置演示：日期选择器的第三列https://codesandbox.io/embed/8l4jkor19

当前行为：

• 双击日期单元格弹出日历
• 按下键盘箭头键并更改所选单元格，日历消失

想要的行为：

• 双击日期单元格弹出日历
• 按在日历日期上导航的键盘箭头键，然后按 Enter 选择

官方示例：先输入单元格https://arfedulov.github.io/semantic-ui-calendar-react/

任何意见将不胜感激，非常感谢

我正在使用 React Data Grid ( https://devexpress.github.io/devextreme-reactive/react/grid/ ) 来显示数据。一切正常，但如果像 25 这样的值介于和 例如
之间，我想将自定义样式（更改背景颜色）添加到特定行。 对于这个客户，我有一个像 25 个用户的值。 现在我想看看这个客户目前处于什么级别！我想通过为其背景 着色来做到这一点。例如有 10个，第一行有 15 个！例如有 20 个，第二行有 30 个！ 在那种情况下，我想要第二行的另一种颜色，因为第二行的 25 介于 20 和 30 之间！ 这就是我现在所拥有的：minNumberOfUsersmaxNumberOfUsers


tr
minNumberOfUsersmaxNumberOfUsers
minNumberOfUsersmaxNumberOfUsers

tr当值介于列网格中的值之间时，有谁知道如何添加自定义类名或样式？
我需要这个来显示当前用户的价格。

这就是我想要实现的目标：

上面的层是黄色的，因为我有 25 个用户，而 25 介于 1 到 50 之间。

我在这里按照教程：http: //adazzle.github.io/react-data-grid/docs/examples/column-sorting并尝试实现 react-data-grid 因为它为我提供了进行排序的功能，特定单元格的树种视图等。但我收到如下错误：

Invariant Violation：Hooks 只能在函数组件的主体内部调用。

我该如何解决？ useState()仅在函数内部使用？我做错了吗？

package.json 如下所示：

请帮忙。我是一个非常新手的反应。

我最近正在更多地探索“react-data-grid”，并试图让基本过滤功能在我的 React 应用程序中工作。这是我正在查看的他们的基本过滤示例：

http://adazzle.github.io/react-data-grid/docs/examples/column-filtering

他们在代码沙箱中的示例代码： https ://codesandbox.io/s/w6jvml4v45 ?from-embed

我将大部分代码工件示例复制到我的类组件中，并尝试为 React 的 useState() 找到等效的解决方案（我对 React 很陌生，而 useState 显然在类中不可用）。

我的代码已针对该论坛稍作修改，并指向公共 JSONPlaceholder 网站，以模拟来自带有测试数据的真实服务器的 REST API 调用。所以希望你可以运行它。这是我的 App.js 代码：

根据上面代码示例中的注释，我使用 babeljs.io 生成了一个非基于箭头的 handleFilterChange 函数并添加了一些日志和调试语句

由于某种原因，嵌套函数：

没有被调用。Chrome 中的调试器没有达到断点或打印出我添加的任何调试日志。

这个日志总是被调用：

内部函数中的这个日志永远不会被调用，我认为这是问题所在？

当我在他们的示例中使用基于非箭头函数的 handleFilterChange 并替换了他们的 handleFilterChange 代码时，它可以工作，所以我相信代码本身很好，并且所有调试日志都出现在控制台中。内部函数也被调用。很高兴使用箭头功能，但如果我能得到一些帮助来让它工作的话。

我还编写了一个不基于类的基本过滤器版本，但在从服务器加载相当大的 JSON 数据时遇到了问题。没有进一步调查，但我认为这是一个时间问题。

由于这个问题，表格被加载到浏览器中，我可以点击右上角的“过滤行”按钮。这将折叠搜索编辑框，我可以输入字母，但在输入字母时表格不会被即时过滤。

实际上，我在 reactjs 中工作。导入了 npm react-data-grid，因为我在列中使用 AutoCompleteEditor 来选择列出的值。它之前工作正常，现在在 Firefox 等中工作。现在，我不确定 Chrome 是否已更新，AutoCompleteEditor 列表未显示在 react-data-grid 表中。知道为什么不显示吗？先感谢您！！

所以我几乎可以肯定做错了什么，并且不理解这里的底层库，但我该如何做到这一点，以便我可以将行项目从外部更新到 React-Data-Grid？

下面的例子，5s后第一行的第一个col被更新，但表中的数据没有。为什么？以及如何改变？

我是 JavaScript 新手，如果不能正确解释问题，请发表评论，至少我可以告诉更多信息。

如果有人可以给我一点帮助，请预先感谢一百万

我已经为此困扰了好几个小时，我无法找到解决这个问题的解决方案。

假设我有列表类型的数据需要从一种格式解析为另一种格式以便我可以与 react-datasheet 格式兼容以显示电子表格

我正在尝试制作RDG Table可以ReactGridLayout在高度和宽度上扩展的（用于我使用的扩展）。我正在使用为我的组件（在我的案例组件中）react-sizeme动态提供height& 。现在，当表格中的滚动条位于顶部时，表格的高度和宽度会正确扩展。下图显示了顶部带有滚动条的表格： 如果我展开表格，一切都会正常工作，如下图所示： WidthExample

一旦我们将 Scrollbar 放在中间，然后扩大表格的高度，行就会消失。只要我在表格中滚动少量，这些行就会变得可见。例如，在下图中，滚动条不在开头（第 6 行可见）。

现在，如果我展开表格，一些行会消失，如下图所示：

当滚动条未开始时，我无法理解为什么行在扩展时会消失。

CodeSandbox 链接：https ://codesandbox.io/embed/rdg-optimising-scrolling-n6xpj

编辑：表当前包含 199 行。