如何在React中触发Onblur事件时获取CodeMirror编辑器内的代码

你提到 onBlur 仅返回 DOMEvent，实际上无需额外定义变量，直接从该事件对象即可读取输入内容：触发 blur 事件的 target 就是当前 textarea 原生 DOM 节点，访问 e.target.value 就能拿到最新的输入文本，不会触发额外的重渲染。
根据你的使用场景，可以选择以下两种实现方式： #

方案1：非受控组件模式（推荐，无额外重渲染） #

适合不需要实时响应输入内容、仅在失焦时才需要读取内容的场景，全程不会因为输入触发状态重渲染，不会出现编辑器失焦问题。

import { useRef } from 'react';

function CodeEditor() {
  // 可选：如果其他地方需要访问textarea节点，可以加ref绑定
  const codeAreaRef = useRef(null);

  const handleBlur = (e) => {
    // 直接从事件对象获取内容即可
    const inputCode = e.target.value;
    // 后续处理逻辑：比如提交、更新状态等
    console.log('输入的代码内容：', inputCode);
  }

  return (
    <textarea
      ref={codeAreaRef}
      onBlur={handleBlur}
      rows={12}
      cols={60}
      placeholder="请输入代码"
    />
  )
}

方案2：缓存实时输入值，失焦时同步到状态 #

如果你的场景需要在输入过程中偶尔读取内容（比如触发快捷键格式化），又不想每次输入都触发状态重渲染，可以把实时输入内容存在 ref 中，仅在失焦时同步到正式状态。

import { useRef, useState } from 'react';

function CodeEditor() {
  // 存储实时输入内容，更新ref不会触发组件重渲染
  const inputCacheRef = useRef('');
  // 仅在失焦时更新的正式状态
  const [finalCode, setFinalCode] = useState('');

  const handleChange = (e) => {
    inputCacheRef.current = e.target.value;
  }

  const handleBlur = () => {
    const codeContent = inputCacheRef.current;
    setFinalCode(codeContent);
    // 后续处理逻辑
    console.log('最终提交的代码：', codeContent);
  }

  return (
    <textarea
      value={inputCacheRef.current}
      onChange={handleChange}
      onBlur={handleBlur}
      rows={12}
      cols={60}
      placeholder="请输入代码"
    />
  )
}

注意：如果使用的是第三方封装的代码编辑器组件，只要 onBlur 返回的事件对象 target 指向实际输入节点，依然可以直接用 e.target.value 取值；如果组件封装层级较深，可以通过组件暴露的实例 ref 调用对应方法获取内容。

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