React Select 组件未打开下拉菜单

Question

我在 React 环境中有一个简单的 Select 组件。 我只需要使用它作为项目的多选菜单，我试图实现它，但下拉菜单根本无法打开，我检查了很多论坛来解决这个问题，但似乎没有解决方案有效，所以我真的希望能在这里转转。 这是我的代码的样子：

const [selectedOptions, setSelectedOptions] = useState([]);
const [isMenuVisible, setIsMenuVisible] = useState(false);

const handleCloseMenu = () => setIsMenuVisible(false);
const handleOpenMenu = () => setIsMenuVisible(true);

// more code

const options = [
    {value: 'project1', label: 'project1'},
    {value: 'project2', label: 'project2'},
]

return(
    <div>
         <Select
             isMulti
             onMenuClose={handleCloseMenu}
             onMenuOpen={handleOpenMenu}
             menuIsOpen={isMenuVisible}
             options={options}
             onChange={setSelectedOptions}
         />
    </div>
); 

我已经检查过某些CSS中没有任何隐藏的溢出，因为我发现它会引起麻烦，并且还尝试删除 isMulti 因为我认为它可能也会产生问题，我真的无法得到它工作

我什至尝试做一些像这样基本的事情，但仍然不起作用：

const options = [
            {value: 'ciao', label: 'ciao'}
        ];


        return(
            <div>
                <Select
                    options={options}
                />
            </div>
        ); 

Answer 1

最近，在大小容器内使用控件时，我遇到了类似的问题。我通过使用

menuPortalTarget

道具解决了这个问题。