محمود_سعداوي نشر 4 مارس 2023 أرسل تقرير مشاركة نشر 4 مارس 2023 السلام عليكم عند الضغط على كرسي يصبح لونه مختلف، إذا أردت حذف الكرسي أعيد الضغط عليه فيرجع لونه الأول ملاحظة: هل يمكن حل المشكل باستعمال الخطافات فقط أنا حاولت باستعمال الكود التالي، المشكل أنه لا أستطيع حجز أكثر من كرسي const handleClick = (id) => { setIndex(id) setIsSelected(!isSelected) } *********************** seatsArray.map(i => ( <div className = {index === i ? "seat selected" : "seat"} key={i} onClick = {()=>handleClick(i)} ></div> شكرا 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 4 مارس 2023 أرسل تقرير مشاركة نشر 4 مارس 2023 بتاريخ 2 دقائق مضت قال محمود سعداوي: أريد أستخدام الهوكس لأني في حاجة فيما بعد لتكوين مصفوفة تحتوي selected seats جربت الحل الذي قدمتموه لي لكن الأمر كان في غاية التعقيد جرب جعل الـ state بشكل array مثل : const [selected, setSelected] = useState([]); وتقوم بإضافة كل الـ index إليه كالتالي : const handleClick = (id) => { // نفحص إن كانت الحالة تحتوي على العنصر وعندها نقوم بحذف العنصر if(selected.includes(id)) setSelected(selected.filter(item=> item !== id)) // إذا لم تكن تحتوي على العنصر فنقوم بإضافته else setSelected([...selected , id]) } وهكذا يصبح الـ selected هو عبارة عن مصفوفة العناصر المحددة، وتعدل كود الـ jsx للشكل : <div className = { selected.includes(i) ? "seat selected" : "seat"} key={i} onClick = {()=>handleClick(i)} ></div> اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Kais Hasan نشر 4 مارس 2023 أرسل تقرير مشاركة نشر 4 مارس 2023 سأعطيك فكرة للحل. يمكنك ان تقوم بإنشاء مكون يمثل الكرسي، بحيث تكون له خاصية selected، و بالتالي يصبح كل كرسي مسؤولاً عن تحديد فيما إذا كان تم الضغط عليه،و هو من يقوم بمعالجة حدث الضغط. أعتقد أنه من السهل عليك تنفيذ هذا الأمر، و يصبح المكون الحالي يقوم فقط بعرض مجموعة من الكراسي لا أكثر. حل آخر أن تقوم بتخزين مصفوفة من العناصر التي تم اختيارها بدلاً من تخزين دليل واحد فقط و عند كل ضغطة إما تقوم بالحذف منها أو الإضافة إليها، لكن شخصياً أنصحك بالحل الأول. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 4 مارس 2023 أرسل تقرير مشاركة نشر 4 مارس 2023 يمكنك فعل ذلك باستخدام الـ dom كالتالي : <div className = {index === i ? "seat selected" : "seat"} key={i} onClick = {e=> { const bg = e.target.style.background; if(bg === "red") e.target.style.background = "gray"; else e.target.style.background = "red"; }}> </div> ولست بحاجة لاستخدام الـ hooks هنا. والوظيفة السابقة تتحقق من لون العنصر، فإذا كان احمر تقوم بتحويله إلى رمادي وإن كان رمادي تعيده إلى اللون الاحمر. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 4 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 4 مارس 2023 بتاريخ 4 دقائق مضت قال عمر قره محمد: يمكنك فعل ذلك باستخدام الـ dom كالتالي : <div className = {index === i ? "seat selected" : "seat"} key={i} onClick = {e=> { const bg = e.target.style.background; if(bg === "red") e.target.style.background = "gray"; else e.target.style.background = "red"; }}> </div> ولست بحاجة لاستخدام الـ hooks هنا. والوظيفة السابقة تتحقق من لون العنصر، فإذا كان احمر تقوم بتحويله إلى رمادي وإن كان رمادي تعيده إلى اللون الاحمر. أريد أستخدام الهوكس لأني في حاجة فيما بعد لتكوين مصفوفة تحتوي selected seats جربت الحل الذي قدمتموه لي لكن الأمر كان في غاية التعقيد اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 4 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 4 مارس 2023 بتاريخ 5 ساعة قال عمر قره محمد: جرب جعل الـ state بشكل array مثل : const [selected, setSelected] = useState([]); وتقوم بإضافة كل الـ index إليه كالتالي : const handleClick = (id) => { // نفحص إن كانت الحالة تحتوي على العنصر وعندها نقوم بحذف العنصر if(selected.includes(id)) setSelected(selected.filter(item=> item !== id)) // إذا لم تكن تحتوي على العنصر فنقوم بإضافته else setSelected([...selected , id]) } وهكذا يصبح الـ selected هو عبارة عن مصفوفة العناصر المحددة، وتعدل كود الـ jsx للشكل : <div className = { selected.includes(i) ? "seat selected" : "seat"} key={i} onClick = {()=>handleClick(i)} ></div> المشكل هنا selected.lengh غير مطابق 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 4 مارس 2023 أرسل تقرير مشاركة نشر 4 مارس 2023 بتاريخ الآن قال محمود سعداوي: المشكل هنا selected.lengh غير مطابق لم افهم مشكلتك تماما، قم بشرح المشكلة بوضوح وكذلك قم بمشاركة الكود. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 4 مارس 2023 أرسل تقرير مشاركة نشر 4 مارس 2023 يمكن حل هذه المشكلة باستخدام الخطافات فقط، بإضافة حالة إضافية لتعقب حالة الكرسي إذا كان قيمته true أو false وفي الحالة الأولى يتم تغيير لون الكرسي إلى اللون المختلف، وإذا تم النقر على الكرسي مرة أخرى والحالة الثانية تصبح صحيحة، يتم إزالة اللون المختلف. يمكن تنفيذ هذا الحل على النحو التالي: const [isSelected, setIsSelected] = useState(false); const handleClick = () => { setIsSelected(!isSelected); }; const seatClasses = classNames('seat', { selected: isSelected }); return ( <div className={seatClasses} onClick={handleClick} > Seat </div> ); في هذا المثال، نستخدم "classnames" لتحقيق تحكم أفضل في فئات الكراسي وتغييرها بين "seat" و "seat selected" بناءً على الحالة الحالية لـ "isSelected". اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 4 مارس 2023 الكاتب أرسل تقرير مشاركة نشر 4 مارس 2023 بتاريخ 7 ساعة قال عمر قره محمد: لم افهم مشكلتك تماما، قم بشرح المشكلة بوضوح وكذلك قم بمشاركة الكود. المشكلة كانت في مكان وضع console.log عندما وضعتها خارج الدالة handleClick تم تجاوز المشكل. شكرا لكم. اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
السلام عليكم
عند الضغط على كرسي يصبح لونه مختلف، إذا أردت حذف الكرسي أعيد الضغط عليه فيرجع لونه الأول
ملاحظة: هل يمكن حل المشكل باستعمال الخطافات فقط
أنا حاولت باستعمال الكود التالي، المشكل أنه لا أستطيع حجز أكثر من كرسي
شكرا
رابط هذا التعليق
شارك على الشبكات الإجتماعية
8 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.