如何使用jQuery.javascript触发react-select input下拉菜单
如何使用jQuery.javascript触发react-select input下拉菜单
提问于 2018-06-07 11:24:58
我使用react-select在一个部分是Ruby on Rails，部分是React.js的网站上使用了一系列的选择下拉列表。我希望能够用Capybara编写一个功能测试，它将：
Click in >单击/聚焦筛选值中的select
- Optionally类型
- 从下拉列表
中选择一个结果
最终结果是确认在提交表单时保存了我们选择的值。
单击时，选择小部件在浏览器中工作得很好，但我不知道如何触发它打开jQuery或其他JS单击/鼠标按下/键入事件。这个是可能的吗？
回答 1
Stack Overflow用户
发布于 2018-10-25 05:23:27
对于第1点：(在JS中打开下拉菜单)
您需要向它传递一个classNamePrefix='someCustomClass'
<Select classNamePrefix='list' options={[{ label: 'one', value: 'one' }]} />classNamePrefix是为您提供所有类处理程序(即list__control、list__option )所必需的。
然后，您需要在dropdown指示器上触发鼠标事件：
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent ('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}
triggerMouseEvent($('div.list__dropdown-indicator'), 'mousedown');这将为您打开下拉列表。
您可能希望像document.getElementsByClassName('list__dropdown-indicator')[0]一样将$('div.list__dropdown-indicator')更改为smth，但我认为您已经领会了要点。
对于第3点：
打开下拉列表后，可以单击其中一个选项，例如，第一个选项如下所示：
document.getElementsByClassName('list__option')[0].click();顺便说一句:如果你不需要通过JS打开下拉菜单，你可以随时将menuIsOpen属性添加到react-select组件中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50732481
复制相关文章
相似问题