我如何在样式组件中使用 onClick 事件

Question

我有风格的问题。 我会用图像写我的问题。 我有一个图像按钮，如果我单击图像按钮，MenuItemContainer 必须是可见性的。

 const MenuItemContainer = styled.div` visibility: hidden; display: inline-block; box-sizing: border-box; width: 200px; padding-left: 16px; padding-right: 16px; border: 1px solid ${({ theme }) => theme.palette.lightBlueGrey}; border-radius: 5px; box-shadow: 0 12px 24px 0px ${({ theme }) => theme.palette.dark15}; `; const ProfileNameWrapper = styled.div` display: flex; width: 36px; height: 36px; border-radius: 50%; margin-right: 25px; background-color: ${({ theme }) => theme.palette.darkGreyBlue}; cursor: pointer; justify-content: center; align-items: center; &:hover ${TooltipText} { visibility: visible; } &:????? ${MenuItemContainer} { visibility: visible; } `;

我可以在这里使用 onClick 吗？

 &:????? ${MenuItemContainer} { visibility: visible; }

Answer 1

即使，我发现在 div 上附加点击事件是错误的，但您可以利用 aria 属性来破解您的问题。

const ProfileNameWrapper = styled.div`
  ...
  &:[aria-expanded='true'] ${MenuItemContainer} {
    visibility: visible;
  }
`

const Component: React.FC<Props> = (props) => {
  const [expanded, setExpanded] = React.useState(false)
  return (
     <ProfileNameWrapper onClick={() => setExpanded(!expanded)} aria-expanded={expanded} />
  )
}