主页 / user-30199960

Ayush Mishra's questions

Martin Hope
Ayush Mishra
Asked: 2025-04-09 15:04:21 +0800 CST
  • 5

我想让每个下拉菜单都成为独立的组件，所以如果我只点击一个下拉菜单，它应该打开，而不是其他的，但是在这里的代码中，当我点击时，两个都同时打开，无论我点击哪个都无所谓

interface DropdownProps {
    options: string[];
    onSelect: (option: string) => void;
}

const Dropdown: React.FC<DropdownProps> = ({ options, onSelect }) => {
    const [open, setopen] = useState(false)
    const [selected, setselected] = useState<string | null>(null)
    const handleClick = (option: string) => {
        setselected(option)
        onSelect(option);
        setopen(false)
    }

    return (
        <div className="dropdown m-1.5 bg-neutral-700 text-neutral-100 w-fit rounded-[0.5rem]">
            <button onClick={() => setopen(!open)} className="py-2 px-3">
                {selected || "select option"}
            </button>
            {
                open && options.map((option, index) => (
                    <li className="py-2 px-3 list-none rounded-[0.5rem] hover:bg-neutral-900" key={index} onClick={() => handleClick(option)}>{option}</li>
                ))
            }
        </div >
    )
}
export default Dropdown


const App = ()=>{
const [selectedOption1, setSelectedOption1] = useState<string | null>(null);
const [selectedOption2, setSelectedOption2] = useState<string | null>(null);

return(
<div className="flex">
                    <Dropdown options={["Option A", "Option B", "Option C"]} onSelect={setSelectedOption1} />
                    <Dropdown options={["Option X", "Option Y", "Option Z"]} onSelect={setSelectedOption2} />
                </div>
)
}
javascript