问题标签 [blueprintjs]

我正在使用 CucumberJS 和 Selenium Webdriver 进行自动化测试。我正在尝试使用这段代码单击表单中的单选按钮：

这是我使用 Blueprint 库的 React 代码：

但是当我运行测试时，它会抛出一个错误，说明：

UnhandledPromiseRejectionWarning：InvalidSelectorError：无效选择器：指定了无效或非法的选择器。

我可以填写表单中的文本框，但无法单击单选按钮。

你能帮我解决这个问题吗？

在我的 React 项目中，我安装了blueprintjs作为依赖项。

当我在代码中这样做时：

我没有为 Popover 组件的 PropTypes 获得任何自动完成功能。

注意：Popover 组件是用 TypeScript 编写的。

如何让自动完成功能在 PhpStorm 中工作？

我以文档为例做了一个选择控件。但是，按钮会根据所选项目的文本宽度更改其宽度。这会使控件跳来跳去，并不是一个好的 UI 设计。

有没有办法指定使用fill或使按钮为固定宽度？虽然我在设置固定宽度方面取得了部分成功，但渲染的控件很难看，文本和箭头都居中，如下所示：

相反，我想要的是：

如何使用 blueprintjs 创建它？

因为有人会要求 SSCCE，这正是我使用的：https ://blueprintjs.com/docs/#select/select-component

编辑：

我已经能够得到我想要的结果，但似乎库本身应该处理这个问题，而不是诉诸一系列 CSS hack。以下 CSS 更改会产生所需的输出，但我仍然希望得到更好的答案。

过滤项目的官方方法是itemListPredicate事件处理程序。它记录在这里：

https://blueprintjs.com/docs/#select/select-component.querying

问题是itemListPredicate有这个签名：

如您所见，它希望立即从已存在项目的固定列表中过滤掉一些项目。这不能用于大型数据集。我需要将查询发送到服务器，等待答案，然后返回（可能是新的）项目。但这不能用上述处理程序完成，因为它不是异步的。

我试图做一个解决方法：

• 调用 itemListPredicate 时将更改的查询保存在本地状态
• 从去抖异步方法向服务器发送查询并等待答案
• 服务器发回响应后更改组件的items属性Select

但这也不起作用。更改items属性将自动关闭 Popover，因此不能用于实时搜索。

我也可以为此使用不同的组件（例如，React-Select），但我想使用带有 blueprintjs Select 的解决方案 - 只是因为它是 blueprintjs 库的一部分并与它无缝集成。（例如尺寸、主题、图标、意图等）

如何正确执行此操作？

更新：我发现我错了。设置 items 属性不会关闭 Popover。我不小心设置了导致重新渲染整个 Select 的其他内容。所以我的想法确实有效。我不会删除这篇文章，因为其他人可能需要它。我将稍后（测试后）发布整个解决方案。

有没有办法让下拉菜单用 SVG 而不是字体呈现箭头？

以下示例代码使用图标字体呈现箭头图标：

这是在没有将字体导入项目的情况下呈现组件的方式：

我不想导入图标字体是有原因的。我使用的是 BluePrint 2.0，但如果 SVG 解决方案存在于 3.0 中，我很乐意升级。

在 React/BlueprintJS 应用程序中，我有一个TagInput。单击时，我需要访问任何标签的字符串值。为简单起见，假设我只需要console.log(value).

我似乎无法在回调中找到标签的值。根据文档，我相信我需要在内部传递一个 onClick 函数tagProps。但是，我尝试过的任何方法似乎都没有返回字符串值。

我在这里创建了一个基本示例，单击任何标签后在控制台中查看错误：

https://codesandbox.io/s/blueprint-sandbox-7jsb3?fontsize=14

我将非常感谢朝着正确的方向轻推，非常感谢。

我不确定这是否是 blueprintjs 特定的行为（也是新的反应），但我无法找到一种方法来在渲染后将内容加载到选项卡中。我认为“保持安装”是反应术语。

是在 render() 中使用“alreadyRendered”标志的技术吗？请问您能提出一个解决方案吗？

https://codesandbox.io/s/blueprint-sandbox-f6ekm

BlueprintJS 的某些组件无法正常工作。我正在关注文档，但它根本不起作用。

我正在尝试在一个小项目中使用 BlueprintJs，但我遇到了一个问题，即样式没有像我预期的那样出现。我确信这很简单，我希望有人能指出我正确的方向。

我想使用他们核心库中的Tabs组件，只是为了了解如何使用它，我决定使用他们提供的示例，并尝试使用它。为此，我创建了一个新项目npx create-react-app MyApp --template typescript，将之前包含在新组件中的 GitHub 链接中的文本包含在内，然后从 App.tsx 导入并加载了该组件：

其中TabsExample只是 BlueprintJs 的原始组件示例。起初，我希望运行该应用程序并获得与文档中相同的外观，因为我认为 BlueprintJs 组件已经带有一些默认样式，但我得到的是一个纯文本页面，没有任何样式或选项卡：由于显然样式没有预先定义，我想包括一些具有 BlueprintJs 理解的值的类名，以尝试提供一些样式，我的<Tabs>组件<Tab>现在看起来像这样：

但我仍然得到相同的纯文本页面。如何设置此示例的样式，使其看起来与文档中的样式相同？

谢谢

我正在编写一个反应应用程序，需要一种在暗模式和亮模式之间切换的方法。我在 blueprintjs 文档中找不到任何文档，其中提到了如何使用某些父道具配置更改所有子组件的主题。