محمود_سعداوي نشر 11 ديسمبر 2022 أرسل تقرير مشاركة نشر 11 ديسمبر 2022 السلام عليكم. أجد مشكلة في حسن توظيف react hooks. في المثال التالي عند النقر على زر معين أريد تغيير الكلاس فقط للزر الذي وقع النقر عليه. ( أنا عندما أنقر على الزر يتغير الكلاس الخاص بكل العناصر) الكود: 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 شكرا. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 11 ديسمبر 2022 أرسل تقرير مشاركة نشر 11 ديسمبر 2022 يمكنك استبدال الوظيفة 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() الرسمي 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم.
أجد مشكلة في حسن توظيف react hooks.
في المثال التالي
عند النقر على زر معين أريد تغيير الكلاس فقط للزر الذي وقع النقر عليه.
( أنا عندما أنقر على الزر يتغير الكلاس الخاص بكل العناصر)
الكود:
شكرا.
رابط هذا التعليق
شارك على الشبكات الإجتماعية
1 جواب على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.