React中如何实现自动换行、随内容增高且最多5行出现滚动条的textarea输入框

1. 修改styled组件样式 #

先调整textarea的基础样式，替换原来的固定高度配置，增加最大高度限制和滚动规则：

const Input = styled.textarea`
  /* 新增：避免padding撑高元素，保证高度计算准确 */
  box-sizing: border-box;
  border: 0;
  outline: none;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  /* 新增：固定行高，方便计算行数对应高度 */
  line-height: 24px;
  width: 100%;
  overflow-wrap: break-word;
  /* 替换原来的固定height：最小高度为1行高度 */
  min-height: 24px;
  /* 新增：最大高度为5行高度 24px*5 */
  max-height: 120px;
  /* 新增：超出最大高度时自动显示滚动条 */
  overflow-y: auto;
  /* 新增：禁止用户拖拽修改输入框大小 */
  resize: none;
`;

2. 增加输入监听逻辑实现高度自适应 #

仅靠样式无法实现随内容自动增高，需要通过JS监听输入事件动态调整高度，React中实现示例如下：

import { useRef } from 'react';

const ChatInput = () => {
  const inputRef = useRef(null);

  const handleInput = () => {
    const textarea = inputRef.current;
    // 先重置为最小高度，保证删除内容时高度能自动回缩
    textarea.style.height = '24px';
    // 调整高度为内容实际高度
    textarea.style.height = `${textarea.scrollHeight}px`;
  };

  return <Input ref={inputRef} onInput={handleInput} />
}

效果说明 #

输入内容不足5行时，输入框高度会跟随内容行数自动增高；内容超过5行时，输入框高度固定为120px，自动出现纵向滚动条，完全符合需求。

内容的提问来源于stack exchange，提问作者some nooby questions