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

最新推荐文章于 2025-02-14 17:23:05 发布

天問_

最新推荐文章于 2025-02-14 17:23:05 发布

阅读量1.5k

点赞数 5

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/tiven_/article/details/135691665

版权

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

Web 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;