react-select：在检查器中进行样式设置时如何保持下拉菜单打开？答案

【问题标题】：react-select: how to keep dropdown open when styling in inspector?react-select：在检查器中进行样式设置时如何保持下拉菜单打开？
【发布时间】：2018-08-24 05:45:22
【问题描述】：

我正在使用 react-select 并且我正在对其进行自定义，但我没有找到执行此操作的选项。在我设计样式时，是否有一些解决方法可以让下拉菜单保持打开状态？

【问题讨论】：

github.com/JedWatson/react-select/issues/927。这里可能有一些有用的 cmets。
适合我。
很高兴有人这么问！

标签： reactjs npm components react-select

【解决方案1】：

在chrome中，进入元素>事件监听器>打开“模糊”>用鼠标转到写有“文档”的右侧，然后你可以看到一个“删除”按钮>点击它

【讨论】：

上帝保佑你。
完美答案，涵盖所有情况
并非所有英雄都穿着斗篷。
非常感谢！ Elements > Event Listeners > open "focusout" > "remove" - 对我有用。
这为我节省了很多时间。非常感谢

【解决方案2】：

如果您使用的是 V2，则可以使用 menuIsOpen 属性来保持菜单始终打开。

如果您使用的是 Chrome 并且拥有 React 开发人员工具插件，您可以在控制台的 React 选项卡中检查您的组件，并直接从浏览器手动切换此属性。对于 V1，您可以切换 isOpen 状态以实现相同的行为。

【讨论】：

【解决方案3】：

这对我有用：

menuIsOpen={true}

【讨论】：

【解决方案4】：

简单的 hack 就是这样

在您的控制台上运行此命令打开菜单，然后等待 5 秒钟，调试器将自动应用，屏幕将被冻结。

setTimeout(() => {debugger;}, 5000)

【讨论】：

如果使用 F8 不起作用，这是第二个最简单的解决方案。谢谢！

【解决方案5】：

事先我在 js 控制台中执行 window.onkeydown = () => {debugger} 并在展开下拉列表后单击任意键

保持开发者工具开放很重要

【讨论】：

不适用于 Windows 10 Chrome 80+。调试开始后下拉菜单关闭。

【解决方案6】：

也许这会有所帮助：

<Select 
   ref={el => (this.selectRef =el)}
   onBlur={() => {
     setTimeout(
       () => 
          this.selectRef.setState({
            menuIsOpen: true,
          }),
        50
     );
   }}
  />

【讨论】：

这是唯一有效的方法。顺便说一句，你不能这样在设置超时内使用这个，你必须在外面创建一个变量引用

【解决方案7】：

如果您使用 Google Chrome 进行调试。您可以将鼠标悬停在选择下拉菜单上并同时按Ctrl+Shift+C，它应该会在调试窗口中自动选择

【讨论】：

【解决方案8】：

通过使用Chrome React extension，您可以在 Select 组件上强制“isOpen”（v3：“menuIsOpen”）状态值为 true。

【讨论】：

【解决方案9】：

打开下拉菜单，然后右键单击下拉菜单...它会在检查器上淹没一个弹出窗口...现在您可以处理您的下拉菜单了。

【讨论】：

一旦你点击检查器中的某个地方，你就会失去焦点。
这实际上是行不通的，问题是你不能执行任何操作，否则菜单会消失