Javascript onBlur在React下拉组件中不工作
我创建了以下React下拉组件:Javascript onBlur在React下拉组件中不工作,javascript,reactjs,dropdown,styled-components,react-component,Javascript,Reactjs,Dropdown,Styled Components,React Component,我创建了以下React下拉组件: const Dropdown = ({ titleTag = 'button', titleCss, title, icon, menuCss, children, open, ...props }) => { const [isOpen, setIsOpen] = React.useState(false) const handleClick = () => setIsOpen(state => !s
const Dropdown = ({
titleTag = 'button',
titleCss,
title,
icon,
menuCss,
children,
open,
...props
}) => {
const [isOpen, setIsOpen] = React.useState(false)
const handleClick = () => setIsOpen(state => !state)
const handleBlur = () => setIsOpen(false)
return (
<DropdownBase>
<Trigger
as={titleTag}
css={titleCss}
onClick={handleClick}
onBlur={handleBlur}
>
{title}
{icon}
</Trigger>
<Submenu css={menuCss} open={isOpen}>
{children}
</Submenu>
</DropdownBase>
)
}
div元素无法接收焦点事件,您可以将tabindex=0添加到触发器组件
试着给组件一个tabindexHandler是否应该像consthandleblur=>setIsOpenstate=>false@URL87我做了,没什么区别。@MarkusZeller我也试过了-没用。我把触发器组件改成了按钮标签,现在可以用了,谢谢。请注意,对于其他处于类似情况的人,tabindex=0对我不起作用。更正:tabindex确实起作用-但是,我忘了将“I”大写。换句话说,它是tabIndex=0,而不是tabIndex=0。
const DropdownBase = styled.div`
display: inline-flex;
position: relative;
z-index: 10;
`
const Trigger = styled.div`
cursor: pointer;
`
const Submenu = styled.div`
display: ${props => (props.open ? 'block' : 'none')};
position: absolute;
top: 100%;
left: 0;
z-index: 20;
${Link} {
display: inline-block;
width: 100%;
}
`