Почему e.target выводит в консоль, а его атрибуты - пустые? React

Question

Есть элемент меню и в нем несколько дочерних элементов. Задавал связанный вопрос тут. Сейчас код элемента такой:

import React from 'react'

import "./sidemenuItemLink.scss"



export default function SideMenuItem({ text_id, id, title }) {

        <div key={id} id = {id} className="side__menu-item" data_to={text_id}>
            <div className='menu__item-box'><p id={id} className='menu__item-text'>{title}</p></div>
        </div>

    )
}

Определить по какому элементу кликнули пытаюсь так:

    const scrollTo = (el, offset = 0) => {
        scroller.scrollTo(el, {
            duration: 800,
            delay: 0,
            smooth: "easeInOutQuart",
            offset: offset
        })
    }

    const handleClick = (e) => {
        e.persist();
        const target = e.target
        console.log(`clicked at ${target.data_to}`);
        scrollTo(`text${target.data_to}`);
        console.log(e.target)
    }
...

return (
<div key={"side-menu"} className="side-menu" onClick={handleClick}>

                    {
                        SideMenuItems.map((dataItem) => { return (<SideMenuItem key={"sideMenu".concat(dataItem.id)} title={dataItem.title} text_id={dataItem.text_id} className="side__menu-item"></SideMenuItem>) })
                    }

                </div>
)

Структура SideMenuItems такая:

const SideMenuItems = [
    {
        id: 1,
        title: "title1",
        text_id: "unic_text_scroll_to_1"
    },
    {
        id: 2,
        title: "title2",
        text_id: "unic_text_scroll_to_2"
    },
...
]

Теперь клик по дочернему элемену вызывает handleClick, но в консоли я вижу пустое место, когда пытаюсь вывести id или data_to пунктам меню, при этом сам e.target выводится "на ура":

В чем причина?

Answer 1

К любым атрибутам можно универсально обратиться через метод getAttribute(). То есть к data_to можно обратиться так - element.getAttribute('data_to'). У data-атрибутов синтаксис через дефис. То есть вместо data_to необходимо написать data-to. Тогда к ним можно обратиться в том числе через свойство объекта dataset. Таким образом - element.dataset.to.

document.addEventListener('click', (e) => {
  const t = e.target;
  if (t.classList.contains('side__menu-item')) {
    console.log(t.id);
    console.log(t.getAttribute('key'));
    console.log(t.getAttribute('data_to')); 
    console.log(t.dataset.to);
  }
})

.side__menu-item {
  height: 100px;
  width: 200px;
  border: 1px solid #222;
  margin-bottom: 10px;
}

<div key='324234' id = '1' class="side__menu-item" data-to='text_1' data_to='text_1'>       
</div>
<div key='123454' id = '2' class="side__menu-item" data-to='text_2' data_to='text_2'>       
</div>
<div key='656543' id = '3' class="side__menu-item" data-to='text_3' data_to='text_3'>       
</div>

БЛОГ НА HUSL

Почему e.target выводит в консоль, а его атрибуты - пустые? React

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