react-18-input-autosize介绍

react-18-input-autosize 是一个 React 18 兼容的输入框自动伸缩组件，可以让 <input> 输入内容时 根据文本长度自动调整宽度，而无需手动设置 size 或监听输入事件动态计算宽度。

它是 react-input-autosize 的 React 18 版本分支，常用于 标签输入、搜索框、表单动态输入 等场景。

1. 核心功能

1. 输入框宽度随内容自动变化

   • 类似标签输入框（如 Gmail 收件人输入）

2. 支持受控和非受控输入

   • 可以用 value 控制，也可以用内部状态

3. React 18 兼容

   • 解决了原版在 React 18 的警告和更新问题

4. 完全样式可控

   • 宽度由组件计算，其他样式自己定义

2. 安装

npm install react-18-input-autosize

或 Yarn：

yarn add react-18-input-autosize

3. 基本用法

import React, { useState } from "react";
import AutosizeInput from "react-18-input-autosize";

function AutoWidthInput() {
  const [value, setValue] = useState("");

  return (
    <AutosizeInput
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="输入内容试试"
    />
  );
}

export default AutoWidthInput;

特点：

• 输入内容越长，输入框宽度越大
• 组件内部自动计算 input 的实际宽度

4. 常用 Props

Prop	类型	说明
value	string	输入框的值（受控模式）
defaultValue	string	默认值（非受控模式）
onChange	function	输入变化回调 (event) => {}
placeholder	string	占位符
inputClassName	string	自定义输入框 class
inputStyle	object	自定义输入框 style
minWidth	number	输入框最小宽度（默认 1px）
maxWidth	number	输入框最大宽度
style	object	外层容器样式
className	string	外层容器 class

5. 应用场景

1. 标签输入框（Tag Input）

   • 类似 Ant Design Select 多选模式，输入框宽度随内容变化

2. 搜索框/命令输入框

   • 输入时自动拉长，空时最小化

3. 动态表单

   • 避免固定宽度浪费空间

6. 示例：标签输入框

import React, { useState } from "react";
import AutosizeInput from "react-18-input-autosize";

function TagInput() {
  const [tags, setTags] = useState(["React"]);
  const [input, setInput] = useState("");

  const handleKeyDown = (e) => {
    if (e.key === "Enter" && input.trim()) {
      setTags([...tags, input.trim()]);
      setInput("");
    }
  };

  return (
    <div style={{ display: "flex", gap: 4, flexWrap: "wrap", border: "1px solid #ccc", padding: 4 }}>
      {tags.map((tag, idx) => (
        <span key={idx} style={{ background: "#eee", padding: "2px 6px", borderRadius: 4 }}>
          {tag}
        </span>
      ))}
      <AutosizeInput
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="输入并回车"
        inputStyle={{ border: "none", outline: "none" }}
      />
    </div>
  );
}

export default TagInput;

效果：

• 标签列表显示已输入的值
• 输入框自动伸缩，输入回车创建新标签

7. 总结

• react-18-input-autosize 让 <input> 根据内容长度自动调整宽度
• 优点：轻量、React 18 兼容、支持受控/非受控
• 缺点：只支持单行 <input>，不支持 <textarea>（可用 react-textarea-autosize）