onBlur не работает в компоненте React Dropdown - PullRequest
Новая
       22

onBlur не работает в компоненте React Dropdown

0 голосов
/ 13 января 2020

Я создал следующий компонент раскрывающегося списка React: 

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>
  )
}

Моя проблема в том, что меню не закроется, если я нажму за пределами меню. Я могу открыть и закрыть меню, нажав на него. Но я не могу закрыть меню, щелкнув по нему, что я и думал, что произойдет с функцией handleBlur. Действительно, эта функция работала до . Я реорганизовал раскрывающееся меню в компонент.

Итак, что мне нужно сделать, чтобы раскрывающееся меню закрывалось всякий раз, когда я нажимал за пределами раскрывающегося списка? menu?

Спасибо.

Примечание: Если это уместно, вот соответствующие стилизованные компоненты, которые составляют раскрывающийся список: 


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%;
  }
`

1 Ответ

1 голос
/ 13 января 2020

Элемент div не может получить событие focus, вы можете добавить tabindex="0" к вашему Trigger компоненту.

вы можете увидеть это

...