Как получить данные из блока div на React?

Question

Всем привет, есть компонент, требуется по клику на строчку с данными (window_items) получить данные из всхе внутренних блоков, чтобы потом работать с ними, например, удалять

function FirstWindowItems({item}) {
    function handleClick(element){
        // e.preventDefault();
        console.log(element);
      }




    return(
        <div className = "window__items" onClick = {handleClick(element)}>
            {/* <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>
    )
}

подаскажите плиз, как это можно сделать ?

Answer 1

Передайте в проп onClick сcылку на функцию:

function FirstWindowItems({item}) {
    function handleClick(element){
        // e.preventDefault();
        console.log(element);
      }




    return(
        <div className = "window__items" onClick = {handleClick}>
            {/* <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>
    )
}

Рекомендую прочесть про о обработке событий в React: https://ru.reactjs.org/docs/handling-events.html

БЛОГ НА HUSL

Как получить данные из блока div на React?

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