问题标签 [rsuite]

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.

0 投票
1 回答
36 浏览

javascript - 有没有办法改变 RSuite-table 中空数据的消息?

我想更改道具数据为空数组时出现的消息。我找不到任何道具来修改它。有什么解决办法吗?我想将此信息翻译成其他语言。

0 投票
2 回答
1081 浏览

javascript - 如何在 React.js 应用程序上使用多个用户输入过滤表

我在 react 应用程序上有 2 个主要组件:一个是包含一堆数据的表格(使用Rsuite Table),另一个在表格上方,只是一个div带有多个input文本字段的表格。就这么简单:

输入字段

例如,如果在“firstName”输入字段中,用户只键入了一个T字母,则表格网格应立即仅显示名称中包含T的名称。这很好,我的实际问题是如何为您在上图中看到的 3 个输入实现这一点。也就是说,如果用户在多个输入文本框中输入内容?看看下面:

这是我的主要App.js外观:

PS:状态正在从Filters组件中提升。我用来useEffect在组件首次加载时生成随机数据。传入的dummyDataInfoTable只是一个数组,其中包含使用faker.js随机生成的对象,它们看起来像这样:

我的Filters.js组件如下所示:

所以在这里你可以看到,我正在提升状态,所以我让它们可用,App.js这样我就可以过滤我传递给 table props 的数组。

我的InfoTable.js组件非常直截了当,再次使用Rsuite Table看起来像这样:

该表显示确实很好,但我想要的是根据用户可能输入或不输入的各种文本字段过滤的数据。例如:如果用户在名字输入字段中键入Jo,在姓氏输入字段中键入S,我希望表格仅显示符合此条件的对象。然后,如果用户键入California,我希望该表重新调整为仅来自加利福尼亚州的人,其名字包含Jo和姓氏包含S。如果用户删除所有内容,该表应该是原始的 100 个值。

我认为问题的一小部分的一种方法是,在App.js我检查 firstName 状态长度是否大于 0 时,如果是,我在.filter作为道具传递的数组上运行。因此,在返回内部,关于网格组件,我有条件地将其渲染为烂:

我可以“有点”使用这种方法来检查字段中是否有输入,并使用 100 行呈现表格或按该标准过滤。问题是,我如何使这对 3 个输入起作用?例如:如果用户在First Name输入字段中键入Jo ,在Last Name输入字段中键入S,我希望表仅显示符合此条件的行(名字包含Jo和姓包含S的对象) . 然后,如果用户在City字段中键入 California ,我希望该表重新调整为仅来自加利福尼亚的人,其名字包含Jo,姓氏包含S. 如果用户从所有 3 个输入中删除文本,表格应该重新调整以显示原始的 100 个值。

请帮忙。

0 投票
2 回答
1624 浏览

node.js - TypeError: webpack.DefinePlugin 不是构造函数

我正在尝试向我的 webpack.config.js 文件添加一个插件,但是当我这样做时,我收到了这个错误。

这是我的 webpack.config.js 文件:

我正在尝试添加此 env 变量来解决我的 react 应用程序遇到的另一个问题(尝试使用导致这些问题的 rsuite),见下文:

任何建议将不胜感激。

0 投票
0 回答
28 浏览

arrays - 保存文件数组数据的问题(React)

我正在尝试存储文件列表数组,但在按下提交按钮后我无法传递数据。

这是代码示例。

https://codesandbox.io/s/file-array-bfxqx

fileList 变量能够存储信息。但是,当我控制台记录 fileList 变量时,只有 fileList[0] 具有实际的文件信息,其他任何内容都未定义。按下提交按钮甚至不会将 fileList[0] 传递给“data”变量。

任何帮助深表感谢。

注意:虽然我知道 rsuiteJS 上传组件允许每个上传字段上传多个文件,但我需要将每个上传字段设置为只允许一个文件。

0 投票
2 回答
39 浏览

javascript - 如何根据react中的field1值将field2和field3设置为必需

如何设置field2field3到必填字段?

我想要做的是什么时候field等于jake并且将是必需field2的。field3但是当它不等于时,jake它就不需要了。

我尝试使用onChangeon thefield1但它不起作用。我也尝试了addRulein field2&field3但它也不起作用。

StringType().isRequired('Required field')当 field1 中的值为 jake 时,我想在 field2 和 field3 中应用它。

0 投票
0 回答
175 浏览

javascript - 如何在具有自己的“标题”属性的 React 组件中使用 HTML 标题属性?

我在我的 react 应用程序中使用 HTML 标题属性作为工具提示,但我也在使用具有标题属性的 rsuite Steps 组件。

基本上,当屏幕尺寸达到您再也看不到步骤标题的程度时,我希望有另一个 title="Discovery" 作为 Step 项目的工具提示。我在整个应用程序中使用 HTML 标题作为工具提示,所以为了保持一致性,我真的不想使用不同的东西。有谁知道是否有办法在这个组件中使用 HTML 标题?我曾尝试将它包装在跨度或 div 中,但这会破坏 Step.Item 组件的样式。

0 投票
2 回答
785 浏览

reactjs - 带有禁用日期的 ReactJS 日期范围选择器 - Rsuite

我正在为我的 ReactJS 项目寻找解决方案。在属性页面中,我想显示具有属性可用性的日期范围选择器。通过使用 Postman 运行查询,我可以使用以下格式从日历中获得可用性,尽管我可以操作数组以满足日期范围选择器的要求。

在此处输入图像描述

如何在日期范围选择器内显示被阻止的日期,以便它们不可点击。我已经尝试过使用 rsuite 和 storybook 的 DateRangePicker,但我没有运气。对于 rsuite,数据应具有以下格式:

Rsuite DateRangePicker disableddays 格式

0 投票
0 回答
57 浏览

javascript - React + Rsuite 下拉菜单:当下拉项目离开屏幕时防止页面向下滚动

我正在使用 react 进行 chrome 扩展。在我的应用程序中,我使用的是Rsuite Dropdown 组件。我正在使用包含大量项目的嵌套菜单,因此在某些菜单上,下拉菜单中的项目列表超出了屏幕。问题是我将鼠标悬停在菜单上,下拉菜单打开,它延伸到屏幕之外,窗口滚动到下拉菜单的底部,我的鼠标现在从菜单选择器上移开,因此下拉菜单关闭并且窗口向上滚动. 我的目标是在窗口不向下滚动到底部的情况下打开下拉菜单。 问题的GIF

我的代码:

我的 App.js 中只有一个组件,它只是我所有书签的下拉列表

对于所有书签,我检查它是一个文件夹还是一个实际的书签,如果它是一个文件夹,我插入一个文件夹组件(它递归地做这件事)

};

如果它是书签,我将书签标题显示为下拉项

当书签项呈现时,我一直在尝试以编程方式向上滚动页面:

但这行不通。

非常感谢您的帮助!

0 投票
0 回答
36 浏览

javascript - 如何修复第二次选择时的延迟显示数据

选择房间时如何解决延迟?
当我尝试选择房间时,它不显示部门的数据,例如,我选择Room 1哪个部门,而不是当我尝试检查部门选择的列表时,它不显示数据,但是当我尝试选择时其他没有部门的房间会在部门选择中显示部门。

0 投票
0 回答
10 浏览

javascript - 如何修复数据不显示在反应钩子中的部门选择上

如何修复数据不显示例如我尝试选择一个部分然后在它显示之前它不显示的部门我应该添加一个新字段来显示数据。我已经添加了onOpen它,当它打开时它将加载然后它将显示部门的数据。但它没有用。我不确定是不是因为部门是数组。但是我所做的就是这样data={department?.[`dept-${index}`]}