Javascript 使用react调整文本区域高度

我正在尝试为我的文本区域动态调整高度。 我在这里看到了一些解决方案，但现在对我来说是可行的。。 我的代码：

---

我希望通过按“回车”键，rextarea将多出一行（如果有可能将其放大到顶部，这将非常棒-就像whatsapp计算机应用程序一样。

您必须使用受控组件，并将此值设置为状态：

const textRowCount = textArea ? textArea.value.split("\n").length : 1;

更新后的值将不会传递到文本框，直到内容和

rowCount

存储在状态。一个简单的例子是：

函数应用程序（）{
const[value，setValue]=useState（“”）；
常量行=value.split（“\n”）.length；
返回(
setValue（e.target.value）}
/>
);
}

实时片段

textarea{resize:none；width:500px；}

函数App（）{
const[value，setValue]=React.useState（“”）；
常量行=value.split（“\n”）.length；
返回(
setValue（e.target.value）}
/>
);
}
ReactDOM.render(
,
document.getElementById（'root'））
);
欢迎访问堆栈溢出。请参阅，也请浏览一下，以便您熟悉如何使用这个平台。它是工作的，谢谢。✅ 我的答案旁边的按钮。
.chat-box{
    width: 70%;
    border-radius: 25px;
    border: solid 1px #b7b7b7;
    background-color: #eeeeee;
    margin-left: 2%;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 2%;
    padding-bottom: 2%;
    margin-top:0.5%;
    resize: none;
    vertical-align: middle;
    overflow: hidden;
}
.chat-box:focus{
    outline-style: none;
}
.chat-box::-webkit-scrollbar {
    width: 2px;
}
.chat-box::-webkit-scrollbar-track {
    background: #eeeeee; 
    border-left: solid 1px #b6bcca;
    width: 10px;
}
.chat-box::-webkit-scrollbar-thumb {
    background: #7b808b;
    border-radius: 3px;   
}

const textRowCount = textArea ? textArea.value.split("\n").length : 1;