Question

我的问题在标题中： 如何使用React根据文本自动调整文本区域的大小

我想使用Refs动态调整我的textarea高度，并将其传递到状态，但无法正常工作。

我创建了一个代码框以帮助您了解我到底想要什么。

https://codesandbox.io/s/ol5277rr25

在我的示例中，我使用Ref来获取文本区域的高度，并将其传递给onChange事件中的状态，但是对于键入的每个字母，高度都会增加，但无法正常工作。

另一种解决方案是在换行时将文本区域拆分为一个数组，对于每个换行符，增加文本区域的高度（1个换行= 1行）。但是我无法检测到自动换行符（当我按Enter没问题时为换行符）。.如果您有想法？

我已经使用了react-autosize-textarea，但是我更喜欢自己做：）

Answer 1

那是因为您得到Element.clientHeight，即CSS Height + Padding。我查看了您的沙盒，您的填充为4px。因此，clientHeight每次都会增加4px。

解决此问题并动态增加文本区域高度的方法是使用Element.scrollHeight而不是clientHeight。就是这样！

编辑：还将填充设置为0。

Answer 2

在设置新的height值之前，您需要将auto设置为height。

var autosize = document.getElementsByClassName('autosize')[0];

addEvent(autosize, ['change', 'cut', 'paste', 'keydown' ], e => resize(autosize));

function addEvent(el, types, fn) {
  if (typeof types === 'string') types = [ types ];
  types.forEach(type => el.addEventListener(type, fn));
}

function resize(ara) {
  ara.style.height = 'auto'; /* Always set to auto before resizing... */
  ara.style.height = ara.scrollHeight + 'px';
}

.container {
  width: 80%;
  margin: 0 auto;
}
.autosize {
  width: 100%;
  height : auto;
}

<div class="container">
  <textarea class="autosize"></textarea>
</div>

如何自动调整文本区域的大小

2 个答案: