Обработчик кликов React Hooks для детей

Здравствуйте, у меня есть обработчик кликов, который я отправляю дочернему компоненту и использую его при щелчке, но по какой-то причине мое событие обработчика кликов в моем родительском компоненте не выполняется.

родительский jsx:

type ClickHandler = (tag: ITag) => (e: MouseEvent) => void

const MenuTags: React.FC<{hover: boolean}> = observer(({hover}) => {
  const {layoutStore} = useRootStore()
  const [tags, setTags] = useState<ITag[]>(Tags)
  const showHideDropItem: ShowHideDropItem = (tag) => {
    console.info(tag)
    setTags((items) =>
      items.map((item) => ({
        ...item,
        Active: item.Name === tag.Name ? tag.Active !== true : false,
      })),
    )
  }

  const clickHandler: ClickHandler = (tag) => (e) => {
    console.info('a')
    e.preventDefault()
    showHideDropItem(tag)
  }

  return (
    <MenuList
      open = {layoutStore.sideBar || layoutStore.onHoverSideState}
      hover = {hover}
    >
      {tags.map((item) => (
        <div key = {JSON.stringify(item.Name)}>
          {item.Title ? <div className = "title_tagList">{item.Title}</div> : ''}
          <TagList
            open = {layoutStore.sideBar || layoutStore.onHoverSideState}
            tag = {item}
            clickHandler = {clickHandler}
          />
        </div>
      ))}
    </MenuList>
  )
})

мои дети jsx:

const TagList: React.FC<ITagList> = observer(({tag, clickHandler, open}) => {
  const tagHandleClick = (e: any) => {
    e.preventDefault()
    if (tag.Active !== undefined) clickHandler(tag)
  }
  return (
    <ListItem open = {open} isDropDown = {!!tag.DropdownItems} active = {tag.Active}>
        <div className = "tag-container">
          <NavLink
            className = "tag-wrapper"
            to = {tag.Link}
            onClick = {tagHandleClick}
          >
            <tag.Icon className = "svg-main" size = {22} />
            <span className = "tag-name">{tag.Name}</span>
          </NavLink>
        </div> 
    </ListItem>
  )
})

при нажатии на мое событие он входит в мой обработчик дочернего компонента, но обработчик не вызывает обработчик моего родительского компонента

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
219
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш clickHandler — это функция, которая возвращает функцию. Возможно, будет легче увидеть, если вы временно перепишете его следующим образом:

const clickHandler: ClickHandler = (tag) => {
  return (e) => {
    console.info("a")
    e.preventDefault()
    showHideDropItem(tag)
  }
}

Вместо того, чтобы возвращать функцию, вы можете просто выполнить логику внутренней функции напрямую.

const clickHandler: ClickHandler = (tag) => {
  console.info('a')
  showHideDropItem(tag)
}

Другие вопросы по теме