时间戳

首页 > 解决方案 > 如何使用 jQuery.javascript 触发 react-select 输入下拉菜单

javascript - 如何使用 jQuery.javascript 触发 react-select 输入下拉菜单

问题描述

我在一个网站上使用 react-select 进行一系列选择下拉菜单，该网站部分是 Ruby on Rails，部分是 React.js。我希望能够在 Capybara 中编写一个功能测试，它将：

  1. 单击/聚焦选择
  2. （可选）输入过滤器值
  3. 从下拉列表中选择一个结果

最终结果是确认我们选择的值在提交表单时被保存。

当我单击时，选择小部件在浏览器中运行良好，但我看不到如何触发它以打开 jQuery 或其他 JS 单击/鼠标按下/键入事件。这可能吗？

标签： javascriptjqueryreact-select

解决方案

对于第 1 点：（在 JS 中打开下拉菜单）

你需要通过它classNamePrefix='someCustomClass'

<Select classNamePrefix='list' options={[{ label: 'one', value: 'one' }]} />

classNamePrefix 是为您提供所有类处理程序所必需的，list__control即list__option..

然后您需要在下拉指示器上触发鼠标事件：

function triggerMouseEvent (node, eventType) {
  var clickEvent = document.createEvent ('MouseEvents');
  clickEvent.initEvent (eventType, true, true);
  node.dispatchEvent (clickEvent);
}
triggerMouseEvent($('div.list__dropdown-indicator'), 'mousedown');

那应该为您打开下拉列表。

您可能想将 smth 更改$('div.list__dropdown-indicator')为 smth like document.getElementsByClassName('list__dropdown-indicator')[0]，但我认为您明白了要点。

对于第 3 点：

打开下拉列表后，您可以单击其中一个选项，例如第一个选项如下所示：

document.getElementsByClassName('list__option')[0].click();

顺便说一句：如果您不一定需要通过 JS 打开下拉菜单，您可以随时将 menuIsOpen 属性添加到 react-select 组件中。

推荐阅读