Question

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

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

https://codesandbox.io/s/ol5277rr25

Answer 1

您可以检查回购。或者，您可以将包添加到您的项目中。

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

如果您真的愿意学习逻辑的确切原理，那么

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

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

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

您可以使用 useRef 和 useLayoutEffect 内置的 react 钩子来解决这个问题。这种方法在浏览器中进行任何渲染之前更新 textarea 的高度，从而避免 textarea 的任何“视觉更新”/闪烁/跳跃。

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

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

3 个答案: