react输入框输入的空格 样式 和输入后页面显示一致

为了确保在 React 输入框中输入的空格样式和输入后页面显示一致，你可以使用 CSS 的 white-space 属性来控制空格的显示。具体来说，可以使用 pre-wrap 值来保留空格和换行符。

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 className="display-text">{text}div>
    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;
}
 
.display-text {
  white-space: pre-wrap; /* 保留空格和换行符 */
  padding: 10px;
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
  font-size: 16px;
  line-height: 1.5;
}

1. React 组件：

   • 使用 useState 来管理输入框的内容。
   • 使用 useRef 来获取 textarea 的 DOM 节点。
   • 使用 useEffect 来监听 text 状态的变化，每次输入内容时动态调整输入框的高度。
   • handleChange 函数用于更新 text 状态。

2. CSS 部分：

   • #dynamic-textarea：设置输入框的最小高度（min-height）和最大高度（max-height）。当内容超过最大高度时，使用 overflow-y: auto 显示垂直滚动条。
   • resize: none：禁止用户手动调整输入框的大小。
   • white-space: pre-wrap：在 .display-text 类中使用 white-space: pre-wrap 来保留空格和换行符，使输入框中的内容和显示的内容样式一致。

3. 动态调整高度：

   • 在 useEffect 中，每次 text 状态变化时，重置输入框的高度为 auto，然后将高度设置为内容的实际高度（scrollHeight）。