@MarEeeeee

Как выделить активный элемент таблицы состоящей из div элементов?

Всем привет. Имеется табличка с неоторыми данными. По нажатию на поле требуется его выделить, как сделать так, чтобы одномоменто могло быть выделено лишь одно поле?
function FirstWindowItems({item}) {
    function handleClick(item){
        // e.preventDefault();
        console.log(item.FIO, item.position);
      }




    return(
        <div className = "window__items" onClick = {() =>handleClick(item)}>
            {/* <div className = "window__item window__name">{item.id}</div> */}
            <div className = "window__item window__name">{item.FIO}</div>
            <div className = "window__item window__name">{item.position}</div>
            <div className = "window__item window__name">{item.birthDay}</div>
            <div className = "window__item window__name">
                {
                    item.sex ?
                        "М" : "Ж"                    
                }            
            </div>
            <div className = "window__item window__name">{
            item.fired ?
                "Уволен":"Работает"
            }
            </div>            
        </div>
    )
}

понимаю, что это нужно сделать внутри handleClick, но если просто добавлять стили на блок, то в итоге выделяется больше одного элемента
  • Вопрос задан
  • 35 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F
В родительском компоненте:

const [ active, setActive ] = useState(null);

{items.map((n, i) => (
  <FirstWindowItems
    item={n}
    isActive={active === i}
    onClick={() => setActive(i)}
  />
))}

В FirstWindowItems:

function FirstWindowItems({ item, isActive, onClick }) {
  return (
    <div className={`window__items ${isActive ? 'active' : ''}`} onClick={onClick}>
      ...

.window__items.active {
  здесь стили для активного элемента
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы