React实现输入框失焦时同框渲染Markdown内容的方法

要实现输入框失焦后将Markdown转为渲染内容显示在同一位置，核心思路是通过状态切换组件：编辑状态使用<textarea>，预览状态使用ReactMarkdown渲染解析后的内容，以此模拟"同一输入框"的效果。

解决方案代码 #

import React, { useState } from "react";
import "./styles.css";
import ReactMarkdown from "react-markdown";

export default function App() {
  const [inputValue, setInputValue] = useState("");
  const [isEditing, setIsEditing] = useState(true);

  // 处理输入内容变更
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  // 失焦时切换到预览模式
  const handleBlur = () => {
    setIsEditing(false);
  };

  // 点击预览内容切换回编辑模式
  const handlePreviewClick = () => {
    setIsEditing(true);
  };

  return (
    <div className="App">
      {isEditing ? (
        <textarea
          autoFocus
          value={inputValue}
          onChange={handleInputChange}
          onBlur={handleBlur}
          style={{ width: "100%", minHeight: "200px", padding: "8px" }}
        />
      ) : (
        <div
          onClick={handlePreviewClick}
          style={{
            border: "1px solid #ccc",
            padding: "8px",
            minHeight: "200px",
            cursor: "text"
          }}
        >
          <ReactMarkdown children={inputValue} />
        </div>
      )}
    </div>
  );
}

关键逻辑说明 #

• 用isEditing状态区分两种模式：true时展示可编辑的<textarea>，false时展示渲染后的Markdown内容容器。
• <textarea>失焦触发handleBlur，切换到预览模式，此时通过ReactMarkdown将用户输入的Markdown解析为DOM元素展示。
• 点击预览容器时触发handlePreviewClick，切回编辑模式，用户可继续修改原始Markdown内容。

原方案行不通的原因 #

• <textarea>仅支持纯文本内容，无法解析HTML或Markdown语法，直接传入HTML标签只会显示为字符串。
• ReactMarkdown的作用是生成DOM元素，不能直接作为<textarea>的value，也无法通过dangerouslySetInnerHTML注入到<textarea>中——因为<textarea>不支持渲染子元素。

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