Reactjs OnClick不'；在引用其他样式化组件时不起作用

我有一个样式化的组件：

export const CloseIcon = styled(Config.ICONS.X)`
  position: absolute;
  right: 13px;
  z-index: 2;
  height: 16px;
  width: 16px;
  cursor: pointer;
  ${Container}:not(:focus-within) & {
    visibility: hidden;
  }
`

这个代码是：

<Container>
  <IconContainer>
    <SearchIcon />
  </IconContainer>
  <Input onChange={handleInputChange} placeholder={placeholder} value={valueOfInput}/>
  <CloseIcon onClick={() => {setValueOfInput('');setSearchValue('');}}/>
</Container>

{setValueOfInput（''）；setSearchValue（''；}}/>

代码沙盒链接：

当输入具有焦点时会发生什么：

如果单击“X”（关闭图标），会发生什么情况

因此，如果单击CloseIcon，焦点将从输入中移除，因此CloseIcon将不可见。然而，CloseIcon中的“OnClick”从未执行，我尝试将console.log放入其中，但它们从未打印出来。我还尝试从配置中将CloseIcon设置为div而不是SVGComponent，但onClick仍然不起作用

如果我在它周围加上一个包装，它会起什么作用呢

<Container>
  <IconContainer>
    <SearchIcon />
  </IconContainer>
  <Input onChange={handleInputChange} placeholder={placeholder} value={valueOfInput}/>
  <CloseIconContainer onClick={() => {setValueOfInput('');setSearchValue('');}}>
    <CloseIcon/>
  </CloseIconContainer>
</Container>

{setValueOfInput（''）；setSearchValue（''；}}>

---

你知道为什么吗？

这个问题与

关闭图标的可见性下降有关。一旦用户单击
关闭图标
，
输入
将失去焦点，导致图标消失，从而阻止其触发与其相连的
onClick
事件

包装图标可以解决这个问题的原因是包装器在这里仍然保持可见性——它不是CSS的目标。由于
onClick
事件处理程序已附加到包装器，因此可以启动它，从而使代码按预期工作

因此，最简单的解决方案是像以前一样使用包装器。通常，将
svg
元素包装在
div
标记中也是一种很好的做法

如果出于任何原因无法使用包装器，请尝试使用其他CSS方法，或者使用Javascript隐藏和显示图标。
我怀疑这与单击
关闭图标时失去焦点有关，从而导致图标失去可见性。如果你把一个代码沙盒和相关的代码链接起来，那么我可以更深入地了解itI，我不知道这个网站，谢谢！链接是这太可惜了，我真的不想有一个包装器，你知道如何在没有包装器的情况下实现这个效果并保持可见性：隐藏吗？我搜索了一个函数，该函数在卸载组件时起作用，但它们实际上不存在。您可以将
onFocus
和
onBlur
事件处理程序放置在
Input
组件上，并以这种方式控制图标的显示/隐藏状态。但是，您需要编写比在图标周围包装一个简单的
div
标记多得多的代码