如何根据最大选项宽度设置反应选择宽度

Question

集合如何根据最大选项宽度选择输入宽度？选项的位置是绝对的，因此它们的大小不会影响父div的宽度。

例如：https://codesandbox.io/s/9o4rkklz14

我需要选择宽度最长的选项宽度。

Answer 1

我在这里和这里的几个问题线程中回答了这个问题，以了解更多关于复杂性和注意事项的背景知识，但这里是方法的要点。

1. 您需要将菜单的宽度设置为自动，以便它可以拉伸以适应其内容。

2. 在Mount上，设置菜单样式(高度：0，可见性：隐藏(，并使用内部引用方法打开菜单

3. 使用onMenuOpen道具，使用一个等待1ms的函数，获取listMenuRef的宽度，然后关闭/重置menuIsOpen。

4. 使用计算的宽度，现在可以设置ValueContainer的宽度。

结果可以在这里看到这个代码沙盒

代码发布在下面。。。

import React, { useState, useRef, useEffect } from "react";
import Select from "react-select";
const App = (props) => {
const selectRef = useRef();
const [menuIsOpen, setMenuIsOpen] = useState();
const [menuWidth, setMenuWidth] = useState();
const [isCalculatingWidth, setIsCalculatingWidth] = useState(false);
useEffect(() => {
if (!menuWidth && !isCalculatingWidth) {
setTimeout(() => {
setIsCalculatingWidth(true);
// setIsOpen doesn't trigger onOpenMenu, so calling internal method
selectRef.current.select.openMenu("first");
setMenuIsOpen(true);
}, 1);
}
}, [menuWidth, isCalculatingWidth]);
const onMenuOpen = () => {
if (!menuWidth && isCalculatingWidth) {
setTimeout(() => {
const width = selectRef.current.select.menuListRef.getBoundingClientRect()
.width;
setMenuWidth(width);
setIsCalculatingWidth(false);
// setting isMenuOpen to undefined and closing menu
selectRef.current.select.onMenuClose();
setMenuIsOpen(undefined);
}, 1);
}
};
const styles = {
menu: (css) => ({
...css,
width: "auto",
...(isCalculatingWidth && { height: 0, visibility: "hidden" })
}),
control: (css) => ({ ...css, display: "inline-flex " }),
valueContainer: (css) => ({
...css,
...(menuWidth && { width: menuWidth })
})
};
const options = [
{ label: "Option 1", value: 1 },
{ label: "Option 2", value: 2 },
{ label: "Option 3 is a reallly realllly long boi", value: 3 }
];
return (
<div>
<div> Width of menu is {menuWidth}</div>
<Select
ref={selectRef}
onMenuOpen={onMenuOpen}
options={options}
styles={styles}
menuIsOpen={menuIsOpen}
/>
</div>
);
};
export default App;