小编twi*_*ls0的帖子

我在React中使用refs或事件处理程序看到了这个问题的一些繁琐的解决方案.我想知道在样式组件中是否有解决方案.

以下代码显然不正确.当我的输入子组件具有焦点时,我正在尝试找出设置父组件的最简单方法.这可能是使用样式组件吗？

什么是最好的方法,特别是考虑到样式组件,即使它意味着依赖于上面提到的React方法之一？

const Parent = () => (
  <ParentDiv>
    <Input/>
  </ParentDiv>
);


const ParentDiv = styled.div`
  background: '#FFFFFF';

  ${Input}:focus & {
    background: '#444444';
  }
`;

const Input = styled.input`
  color: #2760BC;

  &:focus{
    color: '#000000';
  }
`;