问题标签 [primereact]

问问题

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

170 问题
Newest
Active
Bountied
318
Unanswered
0 投票
1 回答
433 浏览

reactjs - MultiSelect 在值状态更改时不更新值（PrimeReact UI）

https://www.primefaces.org/primereact/showcase/#/datatable https://www.primefaces.org/primereact/showcase/#/multiselect

我正在使用 PrimeReact 库来创建和自定义数据表。

我的表是动态的，将根据提供给它的数据自行构建。我根据列的数据类型为每列分配不同的过滤器，但由于列的数量可变，我必须动态创建过滤器。

为了实现这一点，我将过滤器逻辑分解到一个单独的类中，其中包含它们的状态和逻辑。

我的问题是我用作过滤器接口的 MultiSelect 组件在其值的状态更新时不会更新其值。更新状态后，该值保持为空。由于 MultiSelect 组件没有对先前选择的值的引用，我一次只能选择一个值。

我想我对类组件缺少一些了解，因为我通常使用功能组件。在这种情况下，我使用了一个类组件，以便我可以通过 DropDownFilter.filterElement() 从实例化的 DropDownFilter 类中访问 filterElement 并用作 Column 组件中的道具。

0 投票
1 回答
45 浏览

javascript - 使用内联html时ReactJS值未存储在for循环中

我对这段代码有一个小问题（使用 PrimeReact）：

这应该创建多个下拉列表并将值存储在列表状态变量中，以便使用它的索引读取。这是选择某个选项时调用的函数。

这是结果，

在此处输入图像描述

但这里的问题是，当我在第一个下拉列表中选择某个选项时，for 循环中的值“i”为 0，尽管当 onChange 被触发时，(e) => this.updateTypeFilterAtIndex(e.value,i)传递的值“i”将是 1 而不是 0。所以它将引用错误的下拉列表。这发生在所有下拉列表中，看起来存储在回调中的值是提前一次迭代。这是正常的还是 React 的错误？我检查了很多次，一切看起来都很好。

0 投票
1 回答
275 浏览

reactjs - PrimeReact - 数据表和延迟加载问题

我对 DataTable 和延迟加载有疑问。

当我激活延迟加载参数（我无法删除，因为来自 api 的请求太大）时，激活延迟加载时过滤和排序不起作用。我理解它为什么会这样，但我真的不知道如何解决它。

如果您有任何解决方案，我会接受，因为我真的被困在这里:)

链接到代码沙盒-> https://codesandbox.io/s/datatable-t92wk

我在 primereact 中对基本示例进行了一些修改，例如添加延迟加载、删除分页并通过虚拟滚动替换它。我还对过滤进行了修改，但我认为我所做的并不正确，但它在这种情况下有效：它停止了延迟变量，因此我可以使用延迟加载。

我想做的是对表中已经加载的数据进行排序:)

谢谢

0 投票
1 回答
225 浏览

javascript - TypeError：类扩展值# is not a constructor or null in react js

I am trying to over ride some function of a prime react button component but i am getting this error while extending prime react button component class. Here is my code:

I am trying to over ride some function of a prime react button component but i am getting this error while extending prime react button component class. Here is my code:

I'd suggest using webdriver waits but your main issue was if sunglasses.text == 'Sunglasses':.

Below is just suggested edits for future stability.

Now a simpler xpath would be

Which would be used simply as

Imports

0 投票
0 回答
320 浏览

javascript - Excel 喜欢使用 react-data-grid 和 primereact 多选进行过滤

我正在尝试使用Primereact 多选将类似过滤的 excel 添加到react-data-grid (v7)，并在下拉关闭时遇到一些问题。通过像过滤一样的excel，我的意思是当您应用更新所有其他过滤器选项而不是始终保留总选项的过滤器时。这是一个显示问题的代码框（这是它所基于的示例）。在沙箱中，我有一个按钮，用于控制过滤器是否从或拉出。您可以看到，当按钮说它有效但不会过滤下拉列表，因为它使用整个数据集。当按钮说过滤下拉菜单时，也会关闭更改下拉菜单。rowsfilteredRowsrowsfilteredRows

此外，您会注意到这种多选无用，因为您当前使用的过滤器将始终被过滤到您选择的 1 选项。因此，当前正在更改的过滤器不应更改选项，但所有其他过滤器选项都应更改。

把它们加起来：

  • 即使任何下拉选项发生更改，我也希望下拉菜单保持打开状态
  • 当前正在更改的过滤器不应更改选项，但所有其他过滤器选项应更改。

我认为问题与使用vscolumns时的重新渲染有关。filteredRowsrows

0 投票
0 回答
95 浏览

reactjs - 如何包含来自 cdn 的主要反应？

我想使用 Prime React，但我不想将打击影响到我的捆绑包大小。例如，我想通过这个 CDN 链接https://cdn.jsdelivr.net/npm/primereact@6.0.2/menubar.js来使用Menu组件。我正在尝试使用 webpack 的外部功能，但我似乎不明白如何指定事物。

我试过这个

和这个

我用来导入组件文件的代码就像 import { Menu } from 'primereact/menu';

另外，总的来说，我认为我不知道require浏览器中发生了什么。CDN 链接只需要该组件，但我不知道当浏览器执行它时会做什么或者更一般地需要做什么。

0 投票
0 回答
293 浏览

reactjs - 映射组件时如何动态创建 state、functions 和 onChanges 用作 props？

我正在尝试做的事情

我有一个要向其提供数据的 DataTable。DataTable 的列是根据提供的数据动态创建的。我想根据列包含的数据类型对每个列应用过滤器。例如，我希望范围过滤器可用于数值数据，并且唯一值的切换下拉列表可用于具有名称列表的列。在这个问题中，为简单起见，我仅以动态方式分配 DropDown 过滤器。

我遇到的问题

我无法以动态方式为每个 Column 组件提供过滤器所需的道具和状态。

我的问题

无法在表格中使用自定义功能组件（请参阅下面的我尝试过的内容）：

如何动态创建具有需要自己的状态和处理程序的过滤器的列？在状态正常运行的情况下，我无法找到一种方法来做到这一点。

用例背景

  • 我有一个接受 Columns 作为子项的 DataTable
  • 可以将列配置为使用过滤器（即搜索框，或可以打开和关闭的唯一值的下拉列表）
  • 过滤器需要：
    • 一个 filterElement 函数，它返回过滤器类型的 JSX（IE：如果过滤器是下拉列表，则 filterElement 包含一个 MultiSelect）
      • filterElement 需要
        • 跟踪 selectedOptions 的状态
        • 修改 selectedOptions 的 onChange
          • onChange 需要
            • 对数据表的引用

当我们提前知道列时，以静态方式将下拉过滤器应用于列的示例

问题

这在我们事先知道列的静态情况下工作得很好，但是当我尝试根据我的数据动态创建列时就会出现问题。我不知道如何为每个动态列创建 filterElement 和 filterElement 所需的状态和 onChange。

我试过的

创建一个 CustomColumn 组件，扩展 Column 组件

我的第一个解决方案是创建一个 CustomColumn 功能组件，它扩展了 PrimeReact 的列组件。CustomColumn 组件将包含 filterElement 及其所需的状态和功能。它将返回一个带有应用的 filterElement 属性的 Column 组件。不幸的是，我后来了解到 DataTable 不能接受除 Column 组件之外的任何组件。它不会接受扩展原始列组件的反应功能组件。这是 github 问题，指出这是不可能的：https ://github.com/primefaces/primereact/issues/644#issuecomment-790648272

CustomDropDownColumn.js

使用自定义下拉列：

创建一个基于类的组件来封装过滤器逻辑。从此类公开 filterElement 并将其作为 Column 组件中的道具应用

接下来，我尝试为每种过滤器类型创建一个类。过滤器类将存储 filterElement 及其所有必需的状态和功能。我的意图是在映射期间为每一列实例化一个新的 DropDownFilter 类，并将其公开的 filterElement 方法提供给正在映射的列。这不起作用，因为在 React 中以这种方式创建类不会挂载该类。因为它已卸载，所以我无法使用 DropDownFilter 类调用 setState。

DropDownFilter.js

数据表

0 投票
0 回答
16 浏览

reactjs - 使用 Primereact 多选处理大型记录

我的代码中有一个 Primereact 多选，记录很少。但是，需要分别处理 119k 和 65k 记录。

在这种情况下，虚拟滚动会是一个不错的选择吗？如果是，那么多选是否有启用此功能的选项？

我正在查看文档，但找不到与虚拟滚动相关的任何内容

0 投票
1 回答
6811 浏览

reactjs - 无法解析 Primereact 下拉列表中的“react-transition-group”

我收到以下错误-

这是我的 package.json

在 App.js 中

我在这里想念什么？

0 投票
1 回答
336 浏览

reactjs - 使用 Prime React 反应最终形式的动态下拉列表

我正在尝试使用 PrimeReact 库中的 DropDown 初始化用户的动态列表。我能够加载它，即使我不确定它是否正确。我可以选择一个用户，但无法将其传递给表单。我也不确定我应该选择没有状态的用户。我对它们之间的交互方式有点困惑。如果我能得到一些指导，那将非常有帮助。


12345678910