当我在map函数中执行onclick时，它将应用于所有这些函数

Question

当我在map函数中onclick时，我想知道我点击了哪个，然后只对它进行更改。不管我怎么做，我都做不到。你能帮我吗?

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;

Answer 1

也许，您可以使用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;

Answer 2

你可以试试下面的代码:

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;

Answer 3

您应该像这样将参数作为map的索引(或任何唯一的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;