Question

我使用react-select并且我自定义它，我没有找到这样做的选项。我可以使用一些解决方法来确保在我设置样式时打开下拉列表吗？

Answer 1

这种简单的破解方式

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

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

Answer 2

这对我有用：

menuIsOpen={true}

Answer 3

在chrome中，转到“元素”>“事件侦听器”>“打开模糊”>，将鼠标移到“文档”的右侧，然后您可以看到“删除”按钮>单击

Answer 4

之前，我在js控制台中执行window.onkeydown = () => {debugger}，并且在扩展下拉列表后，我单击任意键

保持开发人员工具的开放性很重要

Answer 5

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

Answer 6

如果您使用的是V2，则有一个menuIsOpen道具可以使您始终保持菜单打开。

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

Answer 7

也许这可以帮助：

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

Answer 8

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

此处有更多信息：https://github.com/JedWatson/react-select/issues/927#issuecomment-313022873

Answer 9

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

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

9 个答案: