如何使用 jQuery.javascript 触发反应选择输入下拉列表

Question

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

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

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

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

Answer 1

对于第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');

这应该会为您打开下拉菜单。

您可能想将 更改$('div.list__dropdown-indicator')为类似 的内容document.getElementsByClassName('list__dropdown-indicator')[0]，但我认为您已经明白要点了。

对于第 3 点：

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

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

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