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

Question

我在一个网站上使用react-select作为一系列选择下拉列表，这些部分是Ruby on Rails和部分React.js。我希望能够在Capybara中编写一个功能测试：

1. 点击/关注选择
2. 可选择输入过滤值
3. 从下拉列表中选择一个结果

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

当我点击时，选择小部件在浏览器中完美运行，但我看不到如何触发它以打开jQuery或其他JS click / mousedown / typing事件。这可能吗？

Answer 1

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

您需要将其传递给classNamePrefix='someCustomClass'

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

要给您所有的类处理程序，即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组件中。