當我在地圖功能中單擊時，我想知道我單擊了哪一個并且只對其進行更改。不管我做了什么，我都做不到。你能幫助我嗎 ？
const Product = ({categories}) => {
const [active,setActive] = useState(true)
function activeCategory(event) {
setActive(!active)
}
return (
<div className="flex flex-col">
<div className="pt-8 mx-4">
<h5 className="mx-4 text-2xl font-semibold">Kategoriler</h5>
<ul className="flex">
{categories && categories.map((category)=>(
<li onClick={(e)=>activeCategory(e)} className={active ? "p-2 bg-white shadow-lg m-2 transition duration-300 cursor-pointer" : "p-2 bg-yellow-200 shadow-lg m-2 transition duration-300 cursor-pointer"} key={category.id}>{category.title}</li>
))}
</ul>
</div>
)
export default Product;
uj5u.com熱心網友回復：
也許，您可以使用category.id來識別哪個元素是活動的。
const Product = ({categories}) => {
const [activeId, setActiveId] = useState()
function activeCategory(id) {
setActiveId(id)
}
function isActive(id) {
return id === activeId;
}
return (
...
{categories && categories.map((category)=> (
<li
onClick={() => activeCategory(category.id)}
className={isActive(category.id) ? "..." : ""}
key={category.id}>{category.title}
</li>
))}
...
)
}
export default Product;uj5u.com熱心網友回復：
你可以試試這段代碼：
const Product = ({categories}) => {
const [active,setActive] = useState(0) // if you dont like one of them active , you can change value to null
return (
<div className="flex flex-col">
<div className="pt-8 mx-4">
<h5 className="mx-4 text-2xl font-mibold">Kategoriler</h5>
<ul className="flex">
{categories && categories.map((category , index)=>(
<li onClick={()=> setActive(index)} className={active == index ? "p-2 bg-white shadow-lg m-2 transition duration-300 cursor-pointer" : "p-2 bg-yellow-200 shadow-lg m-2 transition duration-300 cursor-pointer"} key={category.id}>{category.title}</li>
))}
</ul>
</div>
)
export default Product;
uj5u.com熱心網友回復：
您應該將引數作為地圖的索引（或任何唯一的 id 欄位，如果可用）傳遞給activeCategory喜歡這個
const Product = ({categories}) => {
const [activeId, setActiveId] = useState()
function activeCategory(id) {
setActiveId(id)
}
function isActive(id) {
return id === activeId;
}
return (
...
{categories && categories.map((category,index)=> (
<li
onClick={() => activeCategory(index)}
className={isActive(index) ? "..." : ""}
key={index}>{category.title}
</li>
))}
...
)
}
export default Product;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/494001.html
標籤：javascript 反应 反应钩子 下一个.js jsx