如何根据<select>您在 react 中选择的选项自动使标签宽度自动？

Question

我想让我的select标记根据所选选项动态更改其宽度。我已经尝试将select标记的fontSize设置为16px，并使用这个公式计算宽度(selectedCategorie.length*16(，但我为一些选项获得了额外的空间
这是代码笔https://codepen.io/loukil98/pen/ZELjqBv?editors=0010

import React, {useState} from 'react';
const Select = () => {
const [selectedCategorie, setSelectedCategorie] = useState("sqddsq")
return (
<div>
<select
value={selectedCategorie}
onChange={(e) => {
setSelectedCategorie(e.target.value)
}}
style={{width: `${selectedCategorie.length * 16}px`, fontSize: "16px"}}>
<option>Toutes nos categories</option>
<option>sqddsq</option>
<option>jhgjgjg</option>
</select>
</div>
);
};
export default Select;

Answer 1

我可以想象的一件事是渲染第二个不可见的select，并仅向其中添加一个具有当前选定值的option元素(在您的情况下为selectedCategorie(
然后，您可以始终使用ResizeObserver将可见选择宽度设置为不可见选择的宽度，以检测大小变化：

const Select = () => {
const [selectWidth, setSelectWidth] = React.useState(undefined)
const [selectedCategorie, setSelectedCategorie] = React.useState("sqddsq");

React.useEffect(() => {
const resize_ob = new ResizeObserver(([entry]) => setSelectWidth(entry.contentRect.width));
resize_ob.observe(document.querySelector("#width_tmp_select"));
return () => resize_ob.disconnect();
}, [])

return (
<div>
<select
value={selectedCategorie}
onChange={(e) => {
setSelectedCategorie(e.target.value)
}}
style={{ width: selectWidth, fontSize: "16px" }}>
<option>Toutes nos categories</option>
<option>MMMMMMMMMMMMMMMMMMMMM</option>
<option>sqddsq</option>
<option>jhgjgjg</option>
<option>wxcwxc</option>
</select>

<select id="width_tmp_select" style={{fontSize: "16px", visibility: "hidden"}}>
<option>{selectedCategorie}</option>
</select>
</div>
);
};
ReactDOM.render(
<Select />,
document.getElementById('root')
);

Answer 2

已经有一个很棒的库可以为您做到这一点：@tag0/use text width

(来源：我在这里找到了这篇文章：https://morioh.com/p/a8a3609efb78)

您可以简单地使用库来获取文本大小，然后将其设置为select的样式

代码沙盒：https://codesandbox.io/s/gettextwidth-zi45u?file=/src/App.tsx:23-728

import { useTextWidth } from "@tag0/use-text-width";
import React from "react";
export default function App() {
const [selectedCategorie, setSelectedCategorie] = React.useState("sqddsq");
const width = useTextWidth({ text: selectedCategorie, font: "16px Arial" });
return (
<div className="App">
<select
value={selectedCategorie}
onChange={(e) => {
setSelectedCategorie(e.target.value);
}}
style={{ width: width + 24, fontSize: "16px", fontFamily: "Arial" }}
>
<option>Toutes nos categories</option>
<option>sqddsq</option>
<option>jhgjgjg</option>
<option>wxcwxc</option>
</select>
</div>
);
}

注意：在style={{ width: width + 24, fontSize: "16px", fontFamily: "Arial" }}中，24是箭头的宽度。