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

تغيير كلاس لمجموعة عناصر باستعمال الخطافات فقط في ريآكت

محمود_سعداوي

السؤال

السلام عليكم

Capture.JPG.4b3ed46e2d55c8dc36e6e4ffac4d8a66.JPG

عند الضغط على كرسي يصبح لونه مختلف،  إذا أردت حذف الكرسي أعيد الضغط عليه فيرجع لونه الأول

ملاحظة: هل يمكن حل المشكل باستعمال الخطافات فقط

أنا حاولت باستعمال الكود التالي، المشكل أنه لا أستطيع حجز أكثر من كرسي

 const handleClick = (id) => {
    setIndex(id)
    setIsSelected(!isSelected)
  }

***********************
seatsArray.map(i => (
                    <div 
                        className = {index === i ? "seat selected" : "seat"} 
                        key={i}
                        onClick = {()=>handleClick(i)}
                    ></div>

شكرا

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0
بتاريخ 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>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

سأعطيك فكرة للحل.

يمكنك ان تقوم بإنشاء مكون يمثل الكرسي، بحيث تكون له خاصية selected، و بالتالي يصبح كل كرسي مسؤولاً عن تحديد فيما إذا كان تم الضغط عليه،و هو من يقوم بمعالجة حدث الضغط.

أعتقد أنه من السهل عليك تنفيذ هذا الأمر، و يصبح المكون الحالي يقوم فقط بعرض مجموعة من الكراسي لا أكثر.

حل آخر أن تقوم بتخزين مصفوفة من العناصر التي تم اختيارها بدلاً من تخزين دليل واحد فقط و عند كل ضغطة إما تقوم بالحذف منها أو الإضافة إليها، لكن شخصياً أنصحك بالحل الأول.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك فعل ذلك باستخدام الـ 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 هنا.

والوظيفة السابقة تتحقق من لون العنصر، فإذا كان احمر تقوم بتحويله إلى رمادي وإن كان رمادي تعيده إلى اللون الاحمر.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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

جربت الحل الذي قدمتموه لي لكن الأمر كان في غاية التعقيد 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 غير مطابق

Capture1.thumb.JPG.8cd20dccb8b75acd491385f6ad61c40b.JPG

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ الآن قال محمود سعداوي:

المشكل هنا selected.lengh غير مطابق

Capture1.thumb.JPG.8cd20dccb8b75acd491385f6ad61c40b.JPG

لم افهم مشكلتك تماما، 

قم بشرح المشكلة بوضوح وكذلك قم بمشاركة الكود.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكن حل هذه المشكلة باستخدام الخطافات فقط، بإضافة حالة إضافية لتعقب حالة الكرسي إذا كان قيمته 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".

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 7 ساعة قال عمر قره محمد:

لم افهم مشكلتك تماما، 

قم بشرح المشكلة بوضوح وكذلك قم بمشاركة الكود.

المشكلة كانت في مكان وضع console.log عندما وضعتها خارج الدالة handleClick تم تجاوز المشكل.

شكرا لكم.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...