问题标签 [react-data-grid]

我正在使用react-data-grid组件。它提供了一个带有编辑和更多选项的网格结构。当我们点击每个单元格时，我们可以编辑单元格的内容。在我的项目中，我有一种情况，比如当日期列集中时我想绑定一个用户可以选择日期的 UI。为此，我使用了react-datepicker零件。我可以在日期列选项中将 react-datepicker 组件作为格式化程序。我可以更改 react datepicker 组件中的日期，但这不会更新单元格值（当您单击控制台数据按钮时，您可以看到更改是否已更新）。所以大家帮我看看可以在 react-datepicker 组件中选择不同的日期时更新单元格值。当其他单元格中的值更改时，它会自动发生。

我使用的是使用React Data Grid（https://github.com/adazzle/reaeact-data-grid）的网格，并且自从选择单元时，我就遇到了麻烦，它的边框覆盖了下一个单元的文本。我已经完成了“探索性编程”路线，但我不明白在哪里添加代码来对齐文本。

我是否遗漏了一些明显的东西，或者 Reaction 框架是否存在干扰？

我正在加入一个相当大的 React JS 项目，该项目react-data-grid用于显示一堆可编辑的数据。现在，您必须单击更新按钮才能将更改发送到服务器。我手头的任务是创建自动保存功能，如下所示：

1. 用户选择单元格来编辑文本
2. 用户更改文本
3. 用户要么移动到另一个单元格，要么点击远离数据网格
4. 更改被持久化到服务器

这是我尝试过的：

1. onBlur每列上的事件。该事件将触发，但似乎该事件附加到 adiv而不是底层input控件。因此，在触发此事件时，我无权访问单元格的值。
2. onCellDeselected在<ReactDataGrid>组件本身上。似乎此方法在渲染时立即触发，并且仅在移动到另一个单元格时才被触发。如果我正在编辑最后一个单元格并单击远离数据网格，则不会触发此回调。

使用react-data-grid，当用户完成编辑时，如何有效地访问可编辑单元格的内容？

我最近开始学习 React，我的组件中有一个数据网格，单击行时会触发一个事件。在事件处理程序中，我可以获取 Row 道具（单击的行的每一列的值）。所以我想要实现的是：我在表单组件上有 3 个按钮，这些按钮在网格中的行的单击上启用。我想导航到每个按钮的新页面 onClick，其中我将为网格中选择的行执行不同的操作。我面临的问题是，如何将 Row 道具传递给所有 3 个按钮的处理程序，因为我需要 Row 值来使用这些按钮执行不同的操作。

我需要所有三个事件处理程序中的 row.ID，它们是否以某种方式将其存储在某种状态中，以便我能够在整个组件中使用它。？

更新：以下是实现此目的的代码

非常基础的 React

我已经安装了 ngReact，并且可以使用这篇文章在我的 Angular 1.3 项目中创建一个基本组件（Hello World）：https ://www.logilab.org/blogentry/7366955

但我不确定如何在我的 Angular 应用程序中使用 react-data-grid。使用什么组件名称？有人做过吗？我会欢迎一点指导！谢谢！

我正在使用react-data-grid并且我还没有真正设法使行分组功能起作用。我无法通过工具栏配置，但即使我将其注释掉（我实际上不想显示工具栏，因为我希望默认情况下将某些列分组，就是这样，但仍然）我仍然无法让它工作。

因此，首先，安装插件：

第一个错误是关于我的CustomToolbar组件（几乎是从示例中复制的）

但我的 CustomToolbar 看起来不错，除了它使用来自addonsrepo 的组件：

我将react-data-grid-addons/README.md用作导入的参考，但从 repo 的文档来看，我不确定它是否已更新。

如果我将toolbar属性注释掉，我会得到相同的HeaderRow组件错误，这又是 repo 的组件之一。

我正在尝试在我的react-data-grid中实现固定列。我通过添加来遵循示例locked: true，但它不起作用，因此我也尝试使用呈现的自定义行，就像另一个示例一样。

我得到_this.refs[i].setScrollLeft is not a function错误。尝试对同一问题的 hacky 评论对我也不起作用（抱歉，没有足够的代表发表评论！）。

我还尝试创建一个自定义单元格渲染类，但仍然没有运气。我也尝试使用refs回调方式：

任何帮助深表感谢！

编辑：尝试了很多事情，仍然没有运气，但我发现该setScrollLeft方法永远不会传递给Row组件，所以也许它确实是 refs 和/或 props 传递的问题。

在 react-data-grid 中，如何创建一个显示另一列值的列？

我有一个包含以下内容的对象数组：

我的列定义是这样的：

格式化程序：

在格式化程序中，如何访问行上的纬度和经度属性以连接它们？

据我所知，格式化程序只能通过 访问其单元格的值this.props.value，而无法访问该行的整个对象。

我正在使用这个 adazzle 组件：https ://github.com/adazzle/react-data-grid

我想弄清楚如何创建一个可点击的链接。他们在这里有一个单元格格式化程序的示例：http: //adazzle.github.io/react-data-grid/examples.html#/custom-formatters

但是，格式化程序只传递一个值。由于格式化程序只获取一个传递给它的值，因此我无法创建以下格式的链接：

上面代码的问题是value is not an object。它只传递一个字符串等。

有谁使用react-data-grid知道如何解决这个问题？

这是我用于 react-data-grid 的版本。在 Chrome 上运行应用程序。

我正在复制主网站上的Build-In-Editors示例。网格本身按预期运行，但我在 Chrome 的控制台中收到以下警告：

这是为 React Data Grid 组件设置代码的代码片段：

进口：

参数设置：

渲染组件...