时间戳

首页 > 解决方案 > 怎么做标签宽度自动基于您在反应中选择的选项？我想让我的选择标签根据所选选项动态更改其宽度。我已经尝试将 select 标签的 fontSize 设置为 16px 并使用此公式 (selectedCategorie.length * 16) 计算宽度，但我为某些选项获得了额外的空间。这是codepen https://codepen.io/loukil98/pen/ZELjqBv?editors=0010 import React, {useState} from 'react'; cons

问题描述

标签： reactjsselect

解决方案

我可以想象的一件事是渲染第二个不可见并使用当前选定的值（在您的情况下）select仅向其中添加一个元素。 然后，您始终可以使用 a 将可见选择宽度设置为不可见选择的宽度以检测大小变化：optionselectedCategorie
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')
);

推荐阅读