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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

شكرا لكم.