react 项目css输入框文字输入少的时候没有滚动条 文字达到一定高度时添加滚动条

在 React 项目中，你可以使用类似的方法来实现当输入框文字输入达到一定高度时添加滚动条的效果。以下是一个完整的示例，包括 CSS 和 React 组件的实现。

import React, { useState, useEffect, useRef } from 'react';
import './App.css';

const App = () => {
  const [text, setText] = useState('');
  const textareaRef = useRef(null);

  useEffect(() => {
    const textarea = textareaRef.current;
    // 重置高度，防止高度累积
    textarea.style.height = 'auto';
    // 设置高度为内容的高度
    textarea.style.height = `${textarea.scrollHeight}px`;
  }, [text]);

  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className="container">
      <textarea
        id="dynamic-textarea"
        ref={textareaRef}
        value={text}
        onChange={handleChange}
        placeholder="请输入文字..."
      />
    </div>
  );
};

export default App;

.container {
  width: 300px;
  margin: 50px auto;
}

#dynamic-textarea {
  width: 100%;
  min-height: 50px;
  max-height: 150px; /* 设置最大高度 */
  overflow-y: auto; /* 当内容超过最大高度时显示滚动条 */
  padding: 10px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.5;
  resize: none; /* 禁止用户手动调整大小 */
  border: 1px solid #ccc;
  border-radius: 4px;
}