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

محمود سعداوي2 · 28 فبراير 2023

السلام عليكم.

عند النقر على عنصر محدد أريد أن يتغير الكلاس به هو فقط.

المشكل في الكود الذي حددته هو تغير كافة الكلاسات عند النقر على عنصر محدد.

App js

const [isSelected, setIsSelected] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(null)
    const handleClick = (id) => {
      // e.target.classList.toggle('selected')
      setIsSelected(!isSelected);
      setSelectedIndex(id)
    }

Row.js

function Row({id,handleClick,isSelected}) {
    
  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' :
                    isSelected ? 'seat selected' : 'seat'
                }
                    key={index} 
                    onClick = {()=>handleClick(index)}
                >
                    <div></div>
                </div>
            ))
        }
    </div>
  )
}

تم التعديل في 28 فبراير 2023 بواسطة Mustafa Suleiman
تعديل عنوان السؤال

Mustafa Suleiman · 28 فبراير 2023

المشكلة أن الكود الخاص بك يعتمد على الحالة العامة 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>
  )
}

Sam Ahw · 28 فبراير 2023

يمكنك تغيير بنية الشيفرة لديك وتمرير حالة العناصر بشكل مشروط ضمن الخطّاف 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;