0

У меня есть элемент 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>

    )
}

6
  • мне кажется у Вас там опечатка return ( div key={"s — тут тег не открыт, по идее должны были быть ошибки 25 апр в 12:50
  • @PavelMayorov Убрал. 25 апр в 12:55
  • @DaniilLoban Да, не скопировал открывание тега. Поправил. 25 апр в 12:55
  • Что вам мешает в SideMenuItem прокинуть handleClick, чтобы в него id элемента передавался? (event)=>handleClick(id)
    – xydope
    25 апр в 13:10
  • @xydope handleClick хотелось бы оставить в родительском элементе, так как там определен State, который надо менять при клике на элемент меню. 25 апр в 13:54

1 ответ 1

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.

8
  • К сожалению, на Link из reactScroll такой способ не работает. В консоли нет log-а clicked at 25 апр в 13:51
  • Линк на сколько я знаю сразу редиректит, вам нужно редиректится вручную из handleClick 25 апр в 13:54
  • @Konstantin_SH Вот тут есть пример из официального источника как это делается, если не разберетесь создайте песочницу в сodesandbox я продемонстрирую 25 апр в 14:04
  • @Konstantin_SH я сам создал песочницу ознакомьтесь 25 апр в 16:00
  • У меня почему-то не выводит id элемента. Оно пустое. console.log ({${e.target}) работает, а вот console.log(${e.target.id}`) уже выводит пустую строку. 26 апр в 4:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.