Как выделить активный элемент таблицы?

Question

Всем привет. Имеется табличка с неоторыми данными. По нажатию на поле требуется его выделить, как сделать так, чтобы одномоменто могло быть выделено лишь одно поле?

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, но если просто добавлять стили на блок, то в итоге выделяется больше одного элемента

Answer 1

ты можешь через useState хранить айтем const [state, setState] = useState(null) в handleClick кидай в setState текущий item и в classNames проверяй является ли текущий айтем === state если да накидывай стиль

пример: https://codesandbox.io/s/competent-jang-5lq12?file=/src/App.js

Answer 2

function FirstWindowItems({item}) {
function handleClick(item){
    // e.preventDefault();
    console.log(item.FIO, item.position);
    setActiveItem(item.id)
  }

    const [activeItem ,setActiveItem] = useState(null)

    const items = [item.FIO, item.position, item.birthDay, 
  item.sex ? "М" : "Ж", 
  item.fired ? "Уволен":"Работает"]

return(
    <div className = "window__items">
        {items.map((item, id) => {
                <div 
                onClick = {() => handleClick(id)} 
                style={{backgroundColor: activeItem === id ? "#cacaca" : "inherit"}} 
                className = "window__item window__name"
             >
              {item}
             </div> 
        })}
        </div>            
    </div>
)

}

БЛОГ НА HUSL

Как выделить активный элемент таблицы?

Ответы (2 шт):