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

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

javascript 复制代码
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;
css 复制代码
.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)。
相关推荐
凌辰揽月1 小时前
AJAX 学习
java·前端·javascript·学习·ajax·okhttp
然我2 小时前
防抖与节流:如何让频繁触发的函数 “慢下来”?
前端·javascript·html
鱼樱前端3 小时前
2025前端人一文看懂 Broadcast Channel API 通信指南
前端·vue.js
烛阴3 小时前
非空断言完全指南:解锁TypeScript/JavaScript的安全导航黑科技
前端·javascript
鱼樱前端3 小时前
2025前端人一文看懂 window.postMessage 通信
前端·vue.js
快乐点吧3 小时前
【前端】异步任务风控验证与轮询机制技术方案(通用笔记版)
前端·笔记
pe7er4 小时前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶4 小时前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李4 小时前
前端开发中的输出问题
开发语言·前端·javascript
祝余呀5 小时前
HTML初学者第四天
前端·html