تغيير كلاس لعنصر محدد باستخدام React عند الضغط عليه.

يمكنك تغيير بنية الشيفرة لديك وتمرير حالة العناصر بشكل مشروط ضمن الخطّاف useState وبالتالي يصبح تغيير الصفوف أكثر مرونة للعنصر الواحد بالشكل التالي:

import React, { useState } from 'react';

function ListItem(props) {
  return (
    <li className={props.active ? 'active' : ''} onClick={props.onClick}>{props.value}</li>
  );
}

function List() {
  const [activeItem, setActiveItem] = useState(null);
  const items = [1, 2, 3, 4, 5, 6, 7, 8];

  const handleItemClick = (item) => {
    setActiveItem(item === activeItem ? null : item);
  }

  return (
    <ul>
      {items.map((item) =>
        <ListItem key={item.toString()} value={item} active={item === activeItem} onClick={() => handleItemClick(item)} />
      )}
    </ul>
  );
}

export default List;

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

لتجنب هذه المشكلة، تم تعديل الكود بالأسفل لإنشاء حالة جديدة في كل مكون فرعي Row.js للتحقق من ما إذا كان المقعد المختار يجب أن يتغير إلى الحالة المحددة أم لا، وبالتالي يمكن تحديث حالة مقعد واحد دون تحديث كافة المقاعد في الصف.

يمكنك إضافة خاصية isSelected إلى عنصر النقر في مكانه لتحديد حالته، ثم استخدامها في تعيين الكلاس المناسب لهذا العنصر فقط. يمكن تحقيق ذلك من خلال تغيير الدالة handleClick في App.js على النحو التالي:

const handleClick = (index) => {
  setSelectedIndex(index)
}

ثم في Row.js، يمكن تحديث الكلاس المستخدم بناءً على قيمة isSelected المستقبلة من الأب:

function Row({id,isSelected,handleClick,selectedIndex}) {
  return (
    <div className='row'>
      {
        [...Array(8)].map((_,index)=>(
          <div
            className={
              (id===1 && index===3) || 
              (id===1 && index===4) ||
              (id===2 && index===6) ||
              (id===2 && index===7) ||
              (id===4 && index===3) ||
              (id===4 && index===4) ||
              (id===5 && index===4) ||
              (id===5 && index===5) ||
              (id===5 && index===6) ? 
              'seat occupied' :
              selectedIndex === index ? 'seat selected' : 'seat'
            }
            key={index} 
            onClick={() => handleClick(index)}
          >
            <div></div>
          </div>
        ))
      }
    </div>
  )
}