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

Question

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

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

https://codesandbox.io/s/ol5277rr25

Answer 1

您可以使用 useRef 解决此问题和 useLayoutEffect内置的 react 钩子(Hook)。这种方法在浏览器中进行任何渲染之前更新文本区域的高度，因此避免了文本区域的任何“视觉更新”/闪烁/跳跃。

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