reactjs 如何根据所选国家代码更改下拉列表的宽度

inb24sb2  于 2023-08-04  发布在  React
关注(0)|答案(2)|浏览(125)

我在ReactJs中创建了一个下拉菜单来选择国家代码。下拉列表由国家/地区代码和国家/地区名称组成。我希望下拉列表的宽度应该只等于国家/地区代码。
我已经给出宽度:选择元素的最大内容。
下面是同样的代码。我正在做的样式使用顺风CSS。

<div className="flex gap-6 flex-col mt-4 text-[#2c3345] font-semibold">
          <label htmlFor="phone">
            Phone Number <span className=" text-red-600">*</span>
          </label>
          <div className="flex gap-2 items-center text-[#2c3345] font-semibold">
            <select
              name="dropdown"
              id="dropdown"
              className="w-max-content  py-2"
            >
              {countryCode.map((element, index) => (
                <option key={index} value={element.code}>
                  {element.code} - {element.country}
                </option>
              ))}
            </select>

            <input
              type="tel"
              name="phone"
              id="phone"
              required
              onClick={() => selectHandler("phone")}
              className={`bg-transparent outline-none border-b-2 ${
                selectedLink === "phone"
                  ? "border-[#4065fa]"
                  : "border-[#555959]"
              } `}
            />
          </div>
        </div>

字符串
电流输出:-
And here is the current output
我希望下拉列表的宽度应该只等于国家代码的宽度。
所需输出:
Desired Output

e4yzc0pl

e4yzc0pl1#

要根据所选国家代码更改下拉列表的宽度,您可以根据国家代码的长度动态调整选择元素的宽度。

const countryCode = [
  { code: "+1", country: "United States" },
  { code: "+44", country: "United Kingdom" }
];

function App() {
  const [selectedCode, setSelectedCode] = useState(countryCode[0].code);

  const handleChange = (event) => {
    setSelectedCode(event.target.value);
  };

  const dropdownWidth = selectedCode.length * 18 + "px"; // Adjust the width based on the length of the code

  return (
    <div className="flex gap-6 flex-col mt-4 text-[#2c3345] font-semibold">
      <label htmlFor="phone">
        Phone Number <span className="text-red-600">*</span>
      </label>
      <div className="flex gap-2 items-center text-[#2c3345] font-semibold">
        <select
          name="dropdown"
          id="dropdown"
          className="py-2"
          style={{ width: dropdownWidth }} // Set the width dynamically using inline styles
          onChange={handleChange}
          value={selectedCode}
        >
          {countryCode.map((element, index) => (
            <option key={index} value={element.code}>
              {element.code} - {element.country}
            </option>
          ))}
        </select>

        <input
          type="tel"
          name="phone"
          id="phone"
          required
          className="bg-transparent outline-none border-b-2 border-[#555959]"
        />
      </div>
    </div>
  );
}

export default App;

字符串

guz6ccqo

guz6ccqo2#

由于dropdown(select)和input组件的父元素都有flex类,这意味着这两个子元素现在都是flex项。
为了使下拉列表只占用所需的空间,可以让input元素占用flex容器中的所有可用空间,这可以通过在input元素中添加grow Tailwind(TW)类(相当于flex-grow: 1;)来实现。
我还建议在select元素的className字段中添加shrink-0 TW类(相当于flex-shrink: 0;),这将使下拉列表元素占用尽可能多的空间,但不允许它收缩更多,以便为input元素腾出更多空间(在本例中不会在新行中断开)。
最终,您的结构应该类似于以下内容:

...

<div className="flex gap-2 items-center text-[#2c3345] font-semibold">
  <select
    name="dropdown"
    id="dropdown"
    className="shrink-0 py-2"
  >
    {countryCode.map((element, index) => (
      <option key={index} value={element.code}>
        {element.code} - {element.country}
      </option>
    ))}
  </select>

  <input
    type="tel"
    name="phone"
    id="phone"
    required
    onClick={() => selectHandler("phone")}
    className={`grow bg-transparent outline-none border-b-2 ${
      selectedLink === "phone"
        ? "border-[#4065fa]"
        : "border-[#555959]"
    } `}
  />
</div>

...

字符串
联系方式:

相关问题