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

Question

当我在map函数中单击时，我想知道我单击了哪个函数，并且只对其进行了更改。不管我做了什么，我都做不到。你能帮我吗？

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

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