英文:
How to close dropdown on click outside React TypeScript?
问题
我有一个下拉菜单，需要在单个页面的多个位置使用。
当我打开任何一个下拉菜单时，其他的下拉菜单应该关闭。我该如何解决这个问题？
我的代码：
Code Sandbox
英文:
I have a dropdown & I need to use this dropdown in multiple places in single page.
When I open any dropdown then rest of the dropdown should be close. How can I fix this issue ?
My code:
Code Sandbox
答案1
得分: 1
以下是您提供的代码的翻译部分：
import React, { useState } from "react";const Dropdown = () => {const [actionIsOpen, setActionIsOpen] = useState<boolean>(false);const actionList = [{ id: "1", name: "One" },{ id: "2", name: "Two" },{ id: "3", name: "Three" },{ id: "4", name: "Four" }];const handleActionClick = () => {setActionIsOpen((prev) => !prev);};return (<><div className="tw-relative"><span onMouseDown={handleActionClick} className="tw-cursor-pointer"><button onBlur={() => setActionIsOpen(false)}>Dropdown Click</button></span>{actionIsOpen && (<div className="shadow tw-w-48 tw-absolute tw-top-2 tw-z-50 tw-left-4 tw-bg-white tw-pt-2">{actionList.map((val: any) => (<divkey={val.id}className="tw-bg-white-100 hover:tw-bg-violet-100 hover:tw-text-violet-900 tw-cursor-pointer hover:tw-font-bold py-2 px-3 tw-text-gray-600"onMouseDown={() => alert(val.name)}>{val.name}</div>))}</div>)}</div></>);};export default Dropdown;
希望这对您有所帮助！如果您需要进一步的帮助，请随时提出。
英文:
import React, { useState } from "react";const Dropdown = () => {const [actionIsOpen, setActionIsOpen] = useState<boolean>(false);const actionList = [{ id: "1", name: "One" },{ id: "2", name: "Two" },{ id: "3", name: "Three" },{ id: "4", name: "Four" }];const handleActionClick = () => {setActionIsOpen((prev) => !prev);};return (<><div className="tw-relative"><span onMouseDown={handleActionClick} className="tw-cursor-pointer"><button onBlur={() => setActionIsOpen(false)}>Dropdown Click</button></span>{actionIsOpen && (<div className="shadow tw-w-48 tw-absolute tw-top-2 tw-z-50 tw-left-4 tw-bg-white tw-pt-2">{actionList.map((val: any) => (<divkey={val.id}className="tw-bg-white-100 hover:tw-bg-violet-100 hover:tw-text-violet-900 tw-cursor-pointer hover:tw-font-bold py-2 px-3 tw-text-gray-600"onMouseDown={() => alert(val.name)}>{val.name}</div>))}</div>)}</div></>);};export default Dropdown;
Something like this ?
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论