如何用React动态调整textarea高度？

Question

我想使用 Refs 动态调整我的文本区域高度并将其传递给状态，但它无法正常工作。

我创建了一个codesandbox来帮助您了解我到底想要什么。

https://codesandbox.io/s/ol5277rr25

Answer 1

你可以通过使用 React 内置的 useRef 和 useLayoutEffect 来解决这个问题。这种方法会在浏览器中进行任何渲染之前更新文本区域的高度，从而避免文本区域的任何“视觉更新”/闪烁/跳跃。

import React from "react";

const MIN_TEXTAREA_HEIGHT = 32;

export default function App() {
  const textareaRef = React.useRef(null);
  const [value, setValue] = React.useState("");
  const onChange = (event) => setValue(event.target.value);

  React.useLayoutEffect(() => {
    // Reset height - important to shrink on delete
    textareaRef.current.style.height = "inherit";
    // Set height
    textareaRef.current.style.height = `${Math.max(
      textareaRef.current.scrollHeight,
      MIN_TEXTAREA_HEIGHT
    )}px`;
  }, [value]);

  return (
    <textarea
      onChange={onChange}
      ref={textareaRef}
      style={{
        minHeight: MIN_TEXTAREA_HEIGHT,
        resize: "none"
      }}
      value={value}
    />
  );
}

https://codesandbox.io/s/react-textarea-auto-height-s96b2

Answer 2

这是一个不涉及参考文献的简单解决方案。

textarea

使用一些 CSS 和

rows

属性进行动态调整。我最近自己用过这个（例如：https://codesandbox.io/embed/q8174ky809）。

在您的组件中，抓住

textarea

，计算当前行数，然后添加 1:

const textArea = document.querySelector('textarea')
const textRowCount = textArea ? textArea.value.split("\n").length : 0
const rows = textRowCount + 1

return (
  <div>
    <textarea
      rows={rows}
      placeholder="Enter text here."
      onKeyPress={/* do something that results in rendering */}
      ... />
  </div>
)

在你的 CSS 中：

textarea {
  min-height: 26vh; // adjust this as you see fit
  height: unset; // so the height of the textarea isn't overruled by something else
}

Answer 3

您可以检查存储库。或者您可以将包添加到您的项目中。

https://github.com/andreypopp/react-textarea-autosize

如果您真的愿意了解逻辑是如何准确工作的；

https://github.com/andreypopp/react-textarea-autosize/blob/master/src/calculateNodeHeight.js

有一个包含所有计算的源代码。

Answer 4

我面临着在单元格中插入一个 texarea 的问题，当我输入文本时，它会增加。我尝试了不同的方式。结果，我自己制作了单元格。如果没有suppressContentEditableWarning={true} 属性，React 将显示错误。但它可以根据需要在 chrome 和 firefox 中工作。另外，onChange 事件不起作用。使用 onInput={handleInputChange} 事件。由于 中没有值，所以我采用了 event.target.textContent。我不知道这有多安全和正确。因此，这一切都是您自己负责的。