显示从自定义下拉列表中选择的值

Question

我正在构建一个自定义下拉列表。下拉列表的数据集已填充。但我无法显示从下拉列表中选择的值。有人可以告诉我错误/错误逻辑在哪里以及如何修复它。

非常感谢！！！

P.S：请原谅组件名称，这篇文章是我的老同事写的，但他离开了工作场所。

下拉.tsx

import React, { useState } from "react";
import Image from "next/image";

interface Option {
  id: string;
  label: string;
}

interface RadioProps {
  options: Option[];
  placeholder?: string;
  width?: string;
  height?: string;
}

const Radio: React.FC<RadioProps> = ({ options, placeholder, height, width }) => {
  const [selectedOption, setSelectedOption] = useState<string>("");
  const [active, setActive] = useState<boolean>(false);

  const handleFocus = () => {
    setActive(true);
  };

  const handleBlur = () => {
    setActive(false);
  };

  const handleSelect = (optionId: string) => {
    setSelectedOption(optionId);
    setActive(false);
  };

  return (
    <div className="relative text-[#BBBBEA]">
      <div
        className={`select relative flex ${height} ${width} cursor-pointer flex-row items-center gap-x-[10px] border-[1px] border-[#9F76FF33] py-[15px] pl-[15px] pr-[10px] ${active ? "border-[#9F76FF]" : "border-[#9F76FF33]"
          } rounded-md text-[14px] leading-6 text-[#BBBBEA]`}
        onFocus={handleFocus}
        onBlur={handleBlur}
        tabIndex={0}
      >
        <span>
          {selectedOption
            ? options.find((option) => option.id === selectedOption)?.label
            : placeholder}
        </span>
        <Image
          className={
            "ml-auto h-[24px] w-[24px] transition-transform duration-300"
          }
          src={"..."}
          alt="Arrow"
          style={{
            transform: active ? "rotate(-180deg)" : "rotate(0deg)",
          }}
          width={24}
          height={24}
          unoptimized={true}

        />
      </div>
      <div
        className={`options top-15 absolute left-0 w-full z-30 mt-2 rounded-md bg-[#1D1D37] transition-opacity duration-300 ${active ? "opacity-100" : "pointer-events-none opacity-0"}`}
        style={{ maxHeight: "500px", overflowY: "auto" }}
      >
        <div className="p-2">
          <div className="flex flex-col">
            {options.map((option) => (
              <div key={option.id} className="py-1">
                <input
                  id={option.id}
                  name="option"
                  type="radio"
                  className="hidden"
                  checked={selectedOption === option.id}
                  onChange={() => handleSelect(option.id)}
                  onFocus={handleFocus}
                  onBlur={handleBlur}
                />
                <label
                  htmlFor={option.id}
                  className={`block cursor-pointer rounded-md p-2 hover:bg-gray-700 ${selectedOption === option.id ? "bg-gray-700" : ""
                    }`}
                >
                  {option.label}
                </label>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Radio;

城市.ts

interface Option {id: any, label: string}

export const cities: Option[] = [
    {id: 1, label: "New York"},
    {id: 2, label: "San Francisco"},
    {id: 3, label: "Los Angeles"},
    {id: 4, label: "Las Vegas"},
    {id: 5, label: "Chicago"},
    {id: 6, label: "Miami"},
];

步骤1.tsx

...
<div>
    <Radio
        options = {cities}
        placeholder = "Location"
</div>

Answer 1

问题是你的handleSelect函数将optionId作为字符串。

 const handleSelect = (optionId: string) => {
    setSelectedOption(optionId);
    setActive(false);
  };

虽然你的选项有 id 作为数字。

export const cities: Option[] = [
    {id: 1, label: "New York"},
    {id: 2, label: "San Francisco"},
    {id: 3, label: "Los Angeles"},
    {id: 4, label: "Las Vegas"},
    {id: 5, label: "Chicago"},
    {id: 6, label: "Miami"},
];

并且您正在进行严格的平等检查：

<span>
          {selectedOption
            ? options.find((option) => option.id === selectedOption)?.label
            : placeholder}
        </span>

这注定会失败，因为

string != number

解决此问题的最快方法是在比较之前将

option.id

更改为字符串或将

selectedOption

更改为数字