reactjs - 如何仅对数组中的特定项目执行 onclick 功能？
问题描述
我正在通过一个数组进行映射，但我只想选择一个特定的项目，这样我就可以在其中创建一个 onlick 并让它执行特定的操作，但我不知道如何只选择该项目而不是所有项目数组。
我只想从配置文件的变量中选择“退出”。任何帮助我将不胜感激。
import { Fragment } from 'react'
import { Disclosure, Menu, Transition } from '@headlessui/react'
import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
const navigation = ['Dashboard', 'Clients', 'Meals', 'Calendar']
const profile = ['Your Profile', 'Settings', 'Sign out']
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Main() {
return (
<div>
<Disclosure as="nav" className="bg-gray-800">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0">
<img
className="h-8 w-8"
src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg"
alt="Workflow"
/>
</div>
<div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4">
{navigation.map((item, itemIdx) =>
itemIdx === 0 ? (
<Fragment key={item}>
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
<a href="/dashboard" className="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">
{item}
</a>
</Fragment>
) : (
<a
key={item}
href={`/${item}`}
className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium"
>
{item}
</a>
)
)}
</div>
</div>
</div>
<div className="hidden md:block">
<div className="ml-4 flex items-center md:ml-6">
<button
type="button"
className="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
{/* Profile dropdown */}
<Menu as="div" className="ml-3 relative">
<div>
<Menu.Button className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span className="sr-only">Open user menu</span>
<img
className="h-8 w-8 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
{profile.map((item) => (
<Menu.Item key={item}>
{({ active }) => (
<a
href="#"
className={classNames(
active ? 'bg-gray-100' : '',
'block px-4 py-2 text-sm text-gray-700'
)}
>
{item}
</a>
)}
</Menu.Item>
))}
</Menu.Items>
</Transition>
</Menu>
</div>
</div>
<div className="-mr-2 flex md:hidden">
{/* Mobile menu button */}
<Disclosure.Button className="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span className="sr-only">Open main menu</span>
{open ? (
<XIcon className="block h-6 w-6" aria-hidden="true" />
) : (
<MenuIcon className="block h-6 w-6" aria-hidden="true" />
)}
</Disclosure.Button>
</div>
</div>
</div>
<Disclosure.Panel className="md:hidden">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
{navigation.map((item, itemIdx) =>
itemIdx === 0 ? (
<Fragment key={item}>
{/* Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" */}
<a href="#" className="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">
{item}
</a>
</Fragment>
) : (
<a
key={item}
href="#"
className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
>
{item}
</a>
)
)}
</div>
<div className="pt-4 pb-3 border-t border-gray-700">
<div className="flex items-center px-5">
<div className="flex-shrink-0">
<img
className="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
alt=""
/>
</div>
<div className="ml-3">
<div className="text-base font-medium leading-none text-white">Tom Cook</div>
<div className="text-sm font-medium leading-none text-gray-400">tom@example.com</div>
</div>
<button
type="button"
className="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
>
<span className="sr-only">View notifications</span>
<BellIcon className="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div className="mt-3 px-2 space-y-1">
{profile.map((item) => (
<a
key={item}
href="#"
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
>
{item}
</a>
))}
</div>
</div>
</Disclosure.Panel>
</>
)}
</Disclosure>
</div>
)
}
解决方案
我假设您想将 onclick 应用于Menu.Items
因此，只需检查item==='Sign out'然后将您的处理程序放在那里。
<Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
{profile.map((item) => (
<Menu.Item key={item} onClick={item === "Sign out" && handleSomething()}>
{({ active }) => (
<a
href="#"
className={classNames(
active ? "bg-gray-100" : "",
"block px-4 py-2 text-sm text-gray-700"
)}
>
{item}
</a>
)}
</Menu.Item>
))}
</Menu.Items>;
推荐阅读
- chronicle - 单个进程中的 Chronicle-Queue MT 可见性保证是什么？
- c# - 如何从 t-sql 程序传递警告消息？
- java - 使用 java 在 Rest Assured 中读取文本文件作为有效负载
- java - 在不丢失类型信息的情况下获取类 List 的类对象的正确方法是什么？
- mysql - MySql - 错误代码：1932。引擎中不存在表
- jersey - WebSphere 9.0 Jersey 示例应用程序
- azure - 在不删除资源组中现有 Azure Functions 的情况下创建新的 Azure Function App
- python - 无法打开第二个窗口，事件循环已在运行 - PyQt5
- android - 观察到领域随机崩溃“致命信号 6 (SIGABRT)，tid 28688 (RealmFinalizing) 中的代码 -6 (SI_TKILL)，pid 28451”
- javascript - 如何在 TypeScript 中重载泛型方法