Javascript ReactJS-如何在点击输入文本框时在顶部浮动占位符？

我试图在顶部浮动我的占位符。 1.单击文本框时，占位符应位于顶部 2.文本框中的值存在时，占位符应位于顶部

下面是我的JS代码：

  <div class="textBoxContainer input-container">

    <input class='textContainer' 
    type={type} placeholder={placeholder} onChange={handleChange} 
    className={textContainerClassDisabled.join(' ')} disabled={props.textContainerDisabled}/>

    <span className={boxClass.join(' ')} onClick={showHide}>
      {type === 'input' ? 'Hide' : 'Show'}
    </span>

  </div>

---

“在顶端”是什么意思？例如，如果您正在键入，占位符文本会进入div的标题中，或者在您正在键入的文本之前？您可以共享一个或一个工作堆栈片段，以便我们可以看到问题吗？您可以使用material ui TextFields进行此操作

.textBoxContainer{
   background: rgb(255, 255, 255);
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.32);
   height: 56px;
   width: $textBoxElementWidth;
 }

.textContainer{
    width: $textBoxElementWidth - 136px;
    height: $textBoxSpace*2;
    color: $textBoxFontColor;
    font-size: 14px;
    font-family: HelveticaNeue;
    letter-spacing: 0px;
    line-height: $textBoxLineHeight;
    //box-shadow: ;
    &-disabled{
       top:0px !important;
       //left:0px !important;
        width:100%;
       height:100%;
   }
  }

.input-container{
   position: relative;
  span{
  position: absolute;
  right: $textBoxSpace;
  top: $textBoxSpace;
  cursor: pointer;
  width: 45px;
}

input{
    position: absolute;
    top: $textBoxSpace;
    padding-left: $textBoxSpace;
    border:none;
    outline:none;
}
}