react-18-input-autosize介绍修订版本明细

源

采纳

编辑于 1月前

半兽人

react-18-input-autosize介绍

React
组件

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

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

1. 核心功能

输入框宽度随内容自动变化
- 类似标签输入框（如 Gmail 收件人输入）
支持受控和非受控输入
- 可以用 value 控制，也可以用内部状态
React 18 兼容
- 解决了原版在 React 18 的警告和更新问题
完全样式可控
- 宽度由组件计算，其他样式自己定义

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. 应用场景

标签输入框（Tag Input）
- 类似 Ant Design Select 多选模式，输入框宽度随内容变化
搜索框/命令输入框
- 输入时自动拉长，空时最小化
动态表单
- 避免固定宽度浪费空间

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: 4onst [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）

预览