react-select：如何在检查器中设置样式时保持下拉列表打开？

Question

我正在使用react-select并且正在自定义它，我没有找到执行此操作的选项。当我设计样式时，是否可以使用一些解决方法来保持下拉列表打开？

Answer 1

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

Answer 2

如果您使用的是 V2，则可以使用

menuIsOpen

道具让菜单始终保持打开状态。

如果您使用的是 Chrome 并且有 React 开发者工具插件，您可以在控制台的 React 选项卡中检查您的组件，并直接从浏览器手动切换此属性。对于 V1，您可以切换

isOpen

状态来实现相同的行为。

Answer 3

这对我有用：

menuIsOpen={true}

Answer 4

简单的黑客就是这样

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

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

Answer 5

之前，我在 js 控制台中执行

window.onkeydown = () => {debugger}

，展开下拉列表后，我单击任意键

保持开发者工具开放非常重要

Answer 6

您可以使用

menuIsOpen

道具。它位于反应选择文档中并且有效！ 文档：https://react-select.com/props 截屏：

Answer 7

在选择组件中将其作为道具发送

menuIsOpen={true}

Answer 8

也许这会有所帮助：

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

Answer 9

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

更多信息在这里：https://github.com/JedWatson/react-select/issues/927#issuecomment-313022873

Answer 10

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

Answer 11

Google Chrome 的 2023 年答案： 您可以在 Chrome 开发工具中使用

Cmd/Ctrl + Shift + P

启用“模拟聚焦页面”，如果您使用开发工具，则不会使文档模糊。对于调试焦点样式、焦点处理程序、对话框、弹出窗口、下拉菜单等非常方便。

Answer 12

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