React 实现 textarea 文本域自适应高度(autoSize)

在 React 应用中，有时需要一个文本域（textarea）能够根据输入的内容自动调整其高度。这在创建具有良好用户体验的表单和界面时非常有用。本文将介绍如何使用 React 来实现这一功能。

一、基本原理

textarea 的自适应高度实现原理相对简单：根据文本域中的内容动态调整其 style.height 属性。为了实现这一点，我们需要在文本域的 onChange 事件中添加处理逻辑。

二、实现步骤

1. 创建基础 React 组件

首先，我们创建一个基础的 React 组件，包含一个 textarea 元素。

import React, {useState} from 'react';

function AutoSizeTextarea() {
  const [text, setText] = useState('');

  return (
      <textarea
          value={text}
          onChange={(e) => setText(e.target.value)}
      />
  );
}

export default AutoSizeTextarea;

2. 添加自适应高度的逻辑

接下来，我们在 onChange 事件处理函数中添加逻辑以调整 textarea 的高度。