اذهب إلى المحتوى

السؤال

نشر

السلام عليكم.

أجد مشكلة في حسن توظيف react hooks.

في المثال التالي

Capture.JPG.185dc32d01e3d86da2176a822f815b4f.JPG

عند النقر على زر معين أريد تغيير الكلاس فقط للزر الذي وقع النقر عليه.

( أنا عندما أنقر على الزر يتغير الكلاس الخاص بكل العناصر)

الكود:

import React,{useState} from 'react'
import'../../assets/css/custom.css'

function SideBarMenu() {
    let accordionMenuDivInside = [
        {
            id : 1,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
        {
            id : 2,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
        {
            id : 3,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
        {
            id : 4,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
        {
            id : 5,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
    ]

    const [active , setActive] = useState('accordion')
    const handleClick = () =>{
        active === 'accordion' ? setActive('accordion active') : setActive('accordion')
    }

  return (
    <div className="accordionMenuDiv">
        <div className="accordionMenuDivInside">
            {
                accordionMenuDivInside.map(item => {
                    return (
                            <React.Fragment key={item.id}>
                                <button className={active} onClick={handleClick}>
                                    <img className="accordionMenuIcon" 
                                    alt='' src={item.img_src}
                                    /> 
                                    {item.content}
                                </button>
                                <div className="panel">
                                    <ul>
                                        <li><a href="/#" className="accordionItem" > {item.ul.li_1}</a></li>
                                        <li><a href="/#" className="accordionItem" > {item.ul.li_2}</a></li>
                                        <li><a href="/#" className="accordionItem" > {item.ul.li_3} </a></li>
                                    </ul>
                                </div>
                            </React.Fragment>
                            ) 
                })
            }
            
        </div>
    </div>
  )
}

export default SideBarMenu

شكرا.

Recommended Posts

  • 0
نشر

يمكنك استبدال الوظيفة handleClick بالوظيفة التالية والمبنية في جافاسكريبت لتنفيذ مثل هذه الوظيفة :

<button className={active} onClick={(e) => {
            e.target.classList.toggle("accordion")
            e.target.classList.toggle("active")
  }}>
  <img className="accordionMenuIcon" 
       alt='' src={item.img_src}
       /> 
 	 {item.content}
</button>

توثيق الوظيفة toggle() الرسمي

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...