所以我想將一個類分配給側邊欄中的單擊鏈接以分配一個特定的類。這適用于側欄中的一個鏈接，但是一旦我將處理程式附加到另一個鏈接元素并單擊它，兩個鏈接元素都被分配了新類。
我怎樣才能使它更像一個切換器，以便一次只“單擊”一個鏈接元素？是否有某種self僅指單擊的元素？
import {useState} from "react";
import {Routes, Route, Link } from "react-router-dom";
import PlannerWrapper from "./PlannerWrapper"
const DashboardWrapper = () => {
// Class Toggler for clicked element
const [isClicked, setIsClicked] = useState(false)
const clickedClass = 'link-item flex items-center mb-4 rounded-md p-2 pl-4 shadow-lg bg-sx-purple text-sx-pink';
const clickHandler = () => {
setIsClicked(true)
}
return (
<div className="body-wrapper w-full h-screen flex">
<div className="sidebar w-1/6 2xl:w-1/8 h-full bg-sx-purple-dark-soft p-4 border-r-sx-pink border-r-2">
<div className="sidebar-body p-4">
<div className="link-wrapper">
<Link to="/dashboard/overview/">
<div className={isClicked && `${clickedClass}`} onClick={clickHandler}>
<img className="link-icon flex w-4 mr-4" src={imageLocation} alt="imageIcon"/>
<div className="link-text">Overview</div>
</div>
</Link>
<Link to="/dashboard/planner/">
<div className={isClicked && `${clickedClass}`} onClick={clickHandler}>
<img className="link-icon flex w-4 mr-4" src={imagePlanner} alt="imageIcon"/>
<div className="link-text ">Planner</div>
</div>
</Link>
</div>
</div>
</div>
...
uj5u.com熱心網友回復：
我可以想到兩種方法
1手動為每個元素添加標簽
const [clicked, setClicked] = useState('')
在你的鏈接元素上
<Link to="/dashboard/overview/">
<div className={clicked === 'overview' && `${clickedClass}`} onClick={() => setClicked('overview')}>
<img className="link-icon flex w-4 mr-4" src={imageLocation} alt="imageIcon"/>
<div className="link-text">Overview</div>
</div>
</Link>
2使用地圖和這樣的陣列渲染導航
const navs = [
{
link: '/dashboard/overview/',
image: imageLocation,
label: 'Overview'
}, {
link: '/dashboard/planner/',
image: imagePlanner,
label: 'Planner'
},
]
然后
<div className="body-wrapper w-full h-screen flex">
<div className="sidebar w-1/6 2xl:w-1/8 h-full bg-sx-purple-dark-soft p-4 border-r-sx-pink border-r-2">
<div className="sidebar-body p-4">
<div className="link-wrapper">
{navs.map(({link, image, label}, i) =>
<Link to={link} key={i}>
<div className={clicked === i && `${clickedClass}`} onClick={() => setClicked(i)}>
<img className="link-icon flex w-4 mr-4" src={image} alt="imageIcon"/>
<div className="link-text ">{label}</div>
</div>
</Link>
)}
</div>
</div>
</div>
uj5u.com熱心網友回復：
如果您只有兩個鏈接，則創建兩個狀態并將布林值分配給該 onClick 并檢查。在clickHandler中，當用戶選擇第一個鏈接時，將true分配給它，將false分配給第二個，當用戶選擇第二個鏈接時，將false分配給第一個，將true分配給第二個。
如果您有超過 2 個鏈接：采取 1：在陣列狀態中設定一些內容（如 id、name），您可以在其中檢查用戶是否單擊了此鏈接，并向所有被單擊的鏈接顯示特定的 css。
采取2：更新您的clickHandlersetIsClicked(!isClicked)
更新：
import {useState} from "react";
import {Routes, Route, Link } from "react-router-dom";
import PlannerWrapper from "./PlannerWrapper"
const DashboardWrapper = () => {
// Class Toggler for clicked element
const [isClicked, setIsClicked] = useState<number[]>([])
const clickedClass = 'link-item flex items-center mb-4 rounded-md p-2 pl-4 shadow-lg bg-sx-purple text-sx-pink';
const clickHandler = (id:number) => {
const tempIsClicked = [...isClicked]
if (tempIsClicked.includes(id)) {
tempIsClicked.splice(seeMore.indexOf(id), 1)
} else {
tempIsClicked.push(id)
}
setIsClicked(tempSeeMore)
}
}
return (
<div className="body-wrapper w-full h-screen flex">
<div className="sidebar w-1/6 2xl:w-1/8 h-full bg-sx-purple-dark-soft p-4 border-r-sx-pink border-r-2">
<div className="sidebar-body p-4">
<div className="link-wrapper">
<Link to="/dashboard/overview/">
<div className={[...isClicked].includes(1) && `${clickedClass}`} onClick={clickHandler(1)}>
<img className="link-icon flex w-4 mr-4" src={imageLocation} alt="imageIcon"/>
<div className="link-text">Overview</div>
</div>
</Link>
<Link to="/dashboard/planner/">
<div className={[...isClicked].includes(2) && `${clickedClass}`} onClick={clickHandler(2)}>
<img className="link-icon flex w-4 mr-4" src={imagePlanner} alt="imageIcon"/>
<div className="link-text ">Planner</div>
</div>
</Link>
</div>
</div>
</div>
...
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/457438.html
標籤：javascript 反应
下一篇：為什么沒有記錄所有資料？