如果输入框不为空，reactjs 将保持专注于输入框

如何解决如果输入框不为空，reactjs 将保持专注于输入框

我是 React.js 的新手，我正在我的 React 项目中复制这个模板：https://codepen.io/shadeed/pen/ojOzEG

基本上我有一个电子邮件地址输入框。当点击输入框时，它是焦点。当点击离开时，它的焦点会丢失。但是，如果用户输入了某些内容并单击了它，我希望它保持专注。我该怎么做？

以下是我目前拥有的代码：

<div className="form-item">
    <input type="email" id="email"/>
    <label for="email">email address</label>
</div>

input {
    @include placeholder {
      color: #fff;
      text-transform: capitalize;
    }
    position: relative;
    width: 100%;
    height: 100%;
    left: 0;
    border: 0;
    border-radius: 4px;
    background: rgb(55,129,207);
    outline: 0;
    padding: 2em 1em 1em 1em;
    color: #fff;
    font-size: 1em;
    transition: background 0.35s ease-out;
    
    &:focus {
      background: #2862a0;
    }
    
    &:focus + label {
      transform: translateY(-10px) scale(0.75);
      color: #7bacdd;
      
      + button {
        opacity: 1;
      }
    }
  }
  
  label {
    position: absolute;
    left: 1em;
    top: 50%;
    margin-top: -8px;
    color: #fff;
    text-transform: capitalize;
    transform-origin: left center;
    transition: transform 0.25s ease-out,color 0.25s ease-out;
  }

以下是演示：

before click

on click

when clicked away（标签和用户输入相互叠加，这就是为什么如果输入框不为空，我希望焦点保持不变）