React组件中content-editable文本输入方向异常问题

问题分析 #

你遇到的问题根源在于：React调用setHtmlContent后会触发组件重新渲染，通过dangerouslySetInnerHTML重置contenteditable元素内容时，浏览器的原生文本方向处理逻辑和React的DOM更新流程发生冲突——虽然e.currentTarget.innerHTML打印值正确，但重新渲染后元素的文本方向被意外反转。

解决方案 #

方案1：用Ref直接操作DOM（推荐） #

避免通过state频繁驱动dangerouslySetInnerHTML更新，改用useRef获取元素实例，让浏览器原生维护contenteditable的DOM内容，仅在需要时同步内容到state：

import { useRef, useState } from "react";

export default function App() {
  const editorRef = useRef(null);
  const [htmlContent, setHtmlContent] = useState("");

  const handleInput = () => {
    const content = editorRef.current.innerHTML;
    setHtmlContent(content);
    // 无需通过dangerouslySetInnerHTML回写，contenteditable已实时更新DOM
  };

  return (
    <div className="App">
      <div
        ref={editorRef}
        contentEditable
        className="h-full w-full p-4 text-sm text-gray-600 focus:outline-none dark:text-gray-200 border border-gray-300"
        onInput={handleInput}
        dangerouslySetInnerHTML={{ __html: htmlContent }}
      />
      {/* 可添加内容预览区域 */}
      <div className="mt-4 p-4 border border-gray-300">
        <h3>预览:</h3>
        <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
      </div>
    </div>
  );
}

方案2：优化State更新逻辑 #

如果必须通过state驱动渲染，可通过条件判断减少不必要的DOM重置，避免干扰浏览器的文本方向处理：

import { useState, useCallback } from "react";

export default function App() {
  const [htmlContent, setHtmlContent] = useState("");

  const handleInput = useCallback((e) => {
    const newContent = e.currentTarget.innerHTML;
    // 仅当内容真正变化时更新state
    if (newContent !== htmlContent) {
      setHtmlContent(newContent);
    }
  }, [htmlContent]);

  return (
    <div className="App">
      <div
        contentEditable
        className="h-full w-full p-4 text-sm text-gray-600 focus:outline-none dark:text-gray-200 border border-gray-300"
        dangerouslySetInnerHTML={{ __html: htmlContent }}
        onInput={handleInput}
      />
    </div>
  );
}

核心原理 #

contenteditable元素由浏览器原生实时维护DOM状态，React通过dangerouslySetInnerHTML强制覆盖内容时，会打断浏览器的文本方向处理流程。使用Ref直接操作DOM能让浏览器保持对元素的控制权；优化state更新则减少了不必要的DOM重置，从根源避免方向异常。

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