React输入框动态高度调整：实现自适应文本输入框

import React, { useState, useRef, useEffect } from 'react';

function DynamicTextareaInput() {
  const [value, setValue] = useState('');
  const textareaRef = useRef(null);

  // 动态调整textarea高度的副作用
  useEffect(() => {
    if (textareaRef.current) {
      // 重置高度，以便scrollHeight能准确计算
      textareaRef.current.style.height = 'auto';
      // 设置新高度
      textareaRef.current.style.height = textareaRef.current.scrollHeight + 'px';
    }
  }, [value]); // 依赖value变化来触发高度调整

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const textareaStyle = {
    // 样式使其看起来像一个input
    width: '100%',
    padding: '8px 12px',
    border: '1px solid #ccc',
    borderRadius: '4px',
    boxSizing: 'border-box', // 确保padding和border包含在width/height内
    fontFamily: 'inherit',   // 继承父元素的字体
    fontSize: 'inherit',     // 继承父元素的字号
    lineHeight: 'inherit',   // 继承父元素的行高
    outline: 'none',         // 移除默认焦点轮廓

    // 动态高度的关键CSS属性
    minHeight: '40px',       // 默认最小高度
    maxHeight: '120px',      // 最大扩展高度
    overflowY: 'auto',       // 当内容超出maxHeight时显示垂直滚动条
    resize: 'none',          // 禁用用户手动调整大小
    wordWrap: 'break-word',  // 允许长单词断行 (虽然textarea默认支持，但明确指定更安全)
    whiteSpace: 'pre-wrap'   // 保持换行符和空格
  };

  return (
    <div style={{ maxWidth: '400px', margin: '20px auto' }}>
      <label htmlFor="dynamic-input-textarea" style={{ display: 'block', marginBottom: '8px' }}>
        动态高度输入框 (使用 textarea):
      </label>
      <textarea
        id="dynamic-input-textarea"
        ref={textareaRef}
        value={value}
        onChange={handleChange}
        style={textareaStyle}
        rows="1" // 初始行数，会被minHeight覆盖
        placeholder="输入内容，高度将自动调整..."
      />
    </div>
  );
}

export default DynamicTextareaInput;