Javascript 动态调整文本输入框的宽度以适应

我有一个接受文本的文本输入框，我想根据输入宽度动态调整宽度。基于我尝试过的东西，我可以很容易地改变它，但是这个框不能很好地“拥抱”文本，而且右边还有一个空白

<Input
  paddingHorizontal='8px'
  value={value}
  onChange={onChange}
  maxWidth='300px'
  minWidth='120px'
  width={value ? `${width}px` : 120px}

/>

此版本在键入时在侧面留下太多空间

如果您对如何使输入框更适合文本有任何想法或建议，请告诉我。

---

谢谢。

这纯粹是我的意见，但我个人认为调整盒子宽度有点令人不快。如果要允许这么多文本，为什么不使用多行文本区域？你可以调整它的大小以适合你所允许的大小，或者允许用户拖动高度，如果他们想看更多的话。

fit content

可能会有帮助。谢谢你回复Yatrix-fit content似乎没有解决我的问题，但我会继续努力。这纯粹是我的意见，但我个人认为调整盒子宽度有点令人不快。如果要允许这么多文本，为什么不使用多行文本区域？您可以调整它的大小，以适合您允许的大小，或者允许用户拖动高度，如果他们想看到更多内容。

fit content

可能会有所帮助谢谢您回复Yatrix-fit content似乎无法解决我的问题，但我会继续努力。

const onChange = event => {
    let currentWidth;
    //if text is being deleted
    if(value && (value.length > event.target.value.length)){
      currentWidth = event.target.scrollWidth - 5;

    } else {
      currentWidth = event.target.scrollWidth + 1;
    }
    setValue(event.target.value);      
    setWidth(currentWidth);  

}

const onChange = event => {
    //I've tried various numbers here besides 9
    let currentWidth = event.target.value.length * 9;
    setValue(event.target.value);      
    setWidth(currentWidth);  
}