textarea自适应高度代码中event.target.style.height='5px'作用解析

先看你提到的实现自动拉伸的textarea代码：

<textarea 
  onInput={event => {
    event.target.style.height = '5px'
    event.target.style.height = event.target.scrollHeight + 'px'
  }}
/>

两行代码的具体作用 #

• 第一行 event.target.style.height = '5px'：
  这是在强制重置textarea的高度到极小值，核心目的是打破浏览器计算scrollHeight的“惰性”。因为浏览器的scrollHeight计算有个特性：如果元素当前高度已经能容纳所有内容，即便后续内容减少，scrollHeight也不会主动缩小到匹配内容的实际高度。先把高度重置为极小值，就能让浏览器重新计算出内容真正需要的高度。

• 第二行 event.target.style.height = event.target.scrollHeight + 'px'：
  这行是把textarea的高度直接设置为内容的总滚动高度。scrollHeight代表元素内容的完整高度（包括超出可视区域的部分），把高度设成这个值，就能让textarea刚好装下所有内容，不需要滚动条，实现输入换行时自动拉伸的效果。

为什么注释第一行会导致高度异常？ #

当你删掉第一行后，如果textarea之前已经被拉伸到一个较高的高度，哪怕后续删除内容减少了所需高度，浏览器会因为当前高度已经足够容纳剩余内容，不会更新scrollHeight的值——它会保持之前的大数值。这就导致textarea的高度不会随内容减少而缩小，看起来就“异常增大”了。你用offsetHeight看不到变化，是因为offsetHeight是元素的可视高度，此时它和之前的高度一致，但实际内容已经不需要这么高的空间了。

内容的提问来源于stack exchange，提问作者Abid Hasan