Как получить идентификатор оболочки div в React, когда дочерние узлы являются целью события клика?

У меня есть нижний навигационный список элементов div, каждый из которых содержит значок svg. Когда пользователь щелкает значок, мне нужно данное свойство id, чтобы установить состояние, в котором затем отображается конкретный контент. Я на самом деле понял это, но проблема со встроенным svg заключается в том, что переданный event.target является либо тегом <div>, либо тегом <svg>, либо даже более низким тегом <path>. Я предполагаю решение, в котором всякий раз, когда пользователь щелкает, событие всегда всплывает до div.id и возвращается для установки в состояние.

Нужно ли вручную устанавливать обработчик кликов на каждом дочернем узле или есть другой способ?

Пример:

const Nav = () => {
  return (
    <nav>
      <div id="I-WANT-YOU" onClick={event => whatToDoHere(event)}>
         <svg fill="#systemValue">
           <path ....long path .... />
         </svg>
      </div>
      .... repeat 5 times
    </nav>
  )
}

Теперь у меня есть грязное решение для установки значка svg как background-image: url('path/here.svg');, но намерение встроить значки svg состоит в том, что я могу установить пользовательские значения fill, что будет невозможно с этим решением.

ПРИМЕЧАНИЕ:

  • Да, я знаю о <ul> и <li>, стараюсь максимально просто описать проблему.
  • Мои знания о делегировании событий ограничены, и я знаю о параметре true в прослушивателе событий ванильного клика. Документация onClickCapture React мне не помогла.

reactjs javascript svg event-delegation
person andylib93    schedule 13.01.2021    source источник
comment
Привет, ты уверен, что onClickCapture не подходит? События имеют две фазы. Сначала событие распространяется от оконного контейнера к элементу dom, по которому щелкнули (это этап захвата). И затем фаза всплытия — это событие, всплывающее обратно к элементу окна. Если вы установите onClickCapture для родительского элемента div, вы будете получать все входящие события для любого дочернего элемента, по которому щелкнули. Поможет ли это? Если это кажется вам правильным, я сделаю это ответом.   -  person Antoine Laffargue    schedule 13.01.2021
comment
Если я использую onClickCaptue для div, он по-прежнему нацелен на <path>, <svg> или div.   -  person andylib93    schedule 13.01.2021

Ответы (1)


arrow_upward
1
arrow_downward

Если вы хотите, чтобы ваши дети передавали состояние родителю, вам нужно передать функцию, которую они будут вызывать при нажатии.

Итак, в родителе вы поддерживаете состояние с помощью:

const [currentSVG, setCurrentSVG] = useState();

Затем, когда вы вызываете свой дочерний элемент, передайте функцию в качестве реквизита.

 <Item id="1" onClick={(id) => setCurrentSVG(id)} name="SVG 1" />

затем у вашего ребенка возьмите функцию из реквизита и поместите ее в обработчик кликов div, который содержит ваш svg. Затем onClick вызовите функцию, которую вы передали:

const Items = ({ onClick, name, id }) => {
  return (
    <StyledSVGDiv onClick={() => onClick(id)}>
      {name}
      <svg width="100" height="100">
        <circle
          cx="50"
          cy="50"
          r="40"
          stroke="green"
          strokeWidth="4"
          fill="yellow"
        />
      </svg>
    </StyledSVGDiv>
  );
};

Пример: https://oh23w.csb.app/

person Sir Codes Alot    schedule 13.01.2021
comment
Этот!! Большая честь для вас, Sir Codes Alot ???? - person andylib93; 13.01.2021