Как определить на какой элемент внутри родительского нажали? React

Question

У меня есть элемент sidemenu. В нем есть несколько пунктов. Как определить на какой из них кликнули? Пробовал так:


    const handleClick = (e) => {
        const { nodeName, textContent } = e.target;
        setnewScroll(parseInt(nodeName.id, 0, 0))
        console.log(`clicked at ${nodeName.id}`)
    }
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>
)

Но при клике на SideMenuItem не выводится console.log. Как правильно сделать так, чтобы при клике на item запускался handleClick?

Вот SideMenuItem, если нужно:

import React, { useRef } from 'react'
import { Link } from 'react-scroll'


import "./sidemenuItemLink.scss"



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



    return (


        <Link key={id} activeClass='side__menu-item--active' spy={true} hashSpy={true} smooth={true} to={text_id} className="side__menu-item">
            <div className='menu__item-box'><p className='menu__item-text'>{title}</p></div>
        </Link>

    )
}

Answer 1

В целом код был рабочий, но некоторые действия на мой взгляд не правильные. Я добавил передачу id и присвоил его параграфу в SideMenuItem. Так же я не знаю зачем Вам nodeName (это строка у нее нет id) — e.target.id вполне достаточно. Атрибут key используется только для компонент порадждаемых внутри метода map отдельно его использовать нет никакого смысла.

function SideMenuItem({ text_id, id, title }) {
  return (
    <a className="side__menu-item">
      <div className='menu__item-box'>
        <p id={id} className='menu__item-text'>{title}</p>
      </div>
    </a>
  )
}

const App = () => {
  const SideMenuItems = [
    {  
      id: 1,
      title:"Item1",
      text_id:"1" 
    },
    {  
      id: 2,
      title:"Item2",
      text_id:"2" 
    }
  ]

  const handleClick = (e) => {
    const { nodeName, textContent } = e.target;
    console.log(`clicked at ${e.target.id}`, nodeName, textContent)
  }
  return (
    <div key={"side-menu"} className="side-menu" onClick={handleClick}>
    {
      SideMenuItems.map((dataItem) => 
        (<SideMenuItem 
          key={"sideMenu".concat(dataItem.id)} 
          title={dataItem.title} 
          text_id={dataItem.text_id} 
          id={dataItem.id} 
          className="side__menu-item">
        </SideMenuItem>) 
      )
    }
    </div>
  )
}    

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

Для решения с Link лучше использовать программный скролинг вот песочница с примером где в принципе Link не нужен, а вместо него используется scroller.

БЛОГ НА HUSL

Как определить на какой элемент внутри родительского нажали? React

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