如何在没有持续回流的情况下动态调整高度的文本区域？ [复制]

Posted 2023-02-21

【中文标题】如何在没有持续回流的情况下动态调整高度的文本区域？ [复制]

【英文标题】：How to have a dynamically height adjusted textarea without constant reflows? [duplicate]

【发布时间】：2020-01-17 08:55:15

【问题描述】：

我目前正在为我的 React textarea 组件做一些事情：

componentDidUpdate() 
  let target = this.textBoxRef.current;

  target.style.height = 'inherit';
  target.style.height = `$target.scrollHeight + 1px`; 

这很有效，并且允许 textarea 在添加和删除换行符时动态增长和缩小高度。

问题是每次文本更改都会发生重排。这会导致应用程序出现很多延迟。如果我在 textarea 中按住一个键，则会在添加字符时出现延迟和滞后。

如果我删除 target.style.height = 'inherit'; 行，滞后就会消失，所以我知道这是由这种不断的回流引起的。

我听说设置overflow-y: hidden 可能会消除持续回流，但在我的情况下并没有。

我唯一的另一个想法是在每次文本更改时扫描文本区域以获取 \n 字符计数的数量，并根据该计数设置高度。唯一的问题是它看起来很脆弱、冗长，并且对于我想避免的每个文本更改都是一个 O(n) 操作。

想法？

编辑：好的，我最终只是在文本更改处理程序中计算\n 来预测高度。 Contenteditable div 太有限了。也许我稍后会重新发布这个问题，因为我怀疑它会被重新打开。

【问题讨论】：

target.style.height = 'auto';

其实我想重新打开这个。 contentEditable 显然有很多问题。继续处理 textareas 可能会更容易。

显然用contentEditable div 做即使简单的事情也很棘手，我宁愿不必使用带有dangerouslySetInnerhtml 的库来容纳它：github.com/lovasoa/react-contenteditable

【参考方案1】：

您可以改用 contenteditable div：

<div name="someName" contenteditable="true">This text can be edited by the user.</div>

【讨论】：

我刚试过，不幸的是它也有一系列问题。没有占位符文本，无法轻松设置文本（需要使用危险的SetInnerHTML hack），更新选择光标是棘手等。