React聊天应用textarea单次shift+enter换行发送后变空格问题求解

根因说明 #

• HTML 默认将普通文本内的\n换行符识别为普通空白，多个连续空白会合并为单个空格，仅连续两个\n形成段落间隔时才会显示换行，这是单次 shift+enter 不生效的核心原因
• 原有代码存在两处逻辑瑕疵：一是保存消息内容时调用trim()会误删首尾换行，二是onChange已经同步输入内容，sendMessage的else分支重复设置状态可能引发输入时序异常
• textarea 的onInput绑定写法错误，自动增高逻辑不会触发

具体修改步骤 #

1. 修正sendMessage逻辑 #

移除冗余分支，去掉保存内容时的trim()调用：

async function sendMessage(e) {
    if (e.keyCode === 13 && !e.shiftKey) {
      e.preventDefault();
      // 校验仅全空格/换行的空内容
      if (message.trim() === "") {
        return;
      }
      let data = {
        // 直接保存原始内容，不要trim
        content: message,
        createdTimestamp: moment().locale("fr-FR").calendar(),
        id: generateID(),
      };
      setMessages([...messages, data]);
      setMessage("");
      e.target.value = "";
    }
}

2. 修正textarea属性绑定 #

把onInput={() => autoGrow}改为直接绑定函数：

<textarea
  // 修正自动增高逻辑绑定
  onInput={autoGrow}
  onChange={(e) => {
    setMessage(e.target.value);
  }}
  autoComplete="off"
  onKeyDown={sendMessage}
  className="overflow-y-auto rounded-l-2xl outline-none h-12 bg-dark-200 pt-3 text-white pl-4 justify-center resize-none flex items-center"
  placeholder="Text A Message"
  id="message-input"
  style={{ width: "90%", backgroundColor: "#323232" }}
>
</textarea>

3. 渲染消息时处理换行（二选一即可） #

方案A：CSS处理（更推荐，无XSS风险）

给展示消息内容的元素添加white-space: pre-line属性，该属性会自动保留文本内的换行符，同时正常折叠多余空白，完全适配聊天场景需求：

/* 替换为你的消息内容实际类名 */
.message-item-content {
  white-space: pre-line;
}

方案B：JS替换换行符

如果需要更灵活的换行控制，可以将内容中的\n替换为<br>标签后渲染，注意先做XSS防护：

// 消息渲染函数
const formatMessageContent = (content) => {
  // 转义HTML特殊字符，防止XSS注入
  const escapedContent = content.replace(/[&<>"']/g, (char) => {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    }
    return escapeMap[char]
  })
  // 替换换行为br标签
  return { __html: escapedContent.replace(/\n/g, '<br>') }
}

// 组件内调用
<div className="message-item-content" dangerouslySetInnerHTML={formatMessageContent(msg.content)} />

内容的提问来源于stack exchange，提问作者Drackin