Здравствуйте, у меня есть обработчик кликов, который я отправляю дочернему компоненту и использую его при щелчке, но по какой-то причине мое событие обработчика кликов в моем родительском компоненте не выполняется.
родительский 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>
)
})
при нажатии на мое событие он входит в мой обработчик дочернего компонента, но обработчик не вызывает обработчик моего родительского компонента
Ваш clickHandler
— это функция, которая возвращает функцию. Возможно, будет легче увидеть, если вы временно перепишете его следующим образом:
const clickHandler: ClickHandler = (tag) => {
return (e) => {
console.info("a")
e.preventDefault()
showHideDropItem(tag)
}
}
Вместо того, чтобы возвращать функцию, вы можете просто выполнить логику внутренней функции напрямую.
const clickHandler: ClickHandler = (tag) => {
console.info('a')
showHideDropItem(tag)
}