React JS中如何获取CodeMirror组件的输入值？

• 你使用的@uiw/react-codemirror是封装后的React组件，不会透传原生DOM的onInput事件，绑定的onInput回调要么不触发，要么返回的不是原生输入事件对象，e.target.value的取值逻辑完全不生效，导致状态始终停留在初始空值，控制台没有有效输出。
• 原代码遗漏了React Hooks中useState的导入，运行阶段本身就会抛出引用错误。

@uiw/react-codemirror提供了专属的onChange回调监听编辑器内容变化，回调的第一个入参直接就是编辑器当前的最新文本内容，不需要从事件对象上取值。
修正后的完整代码如下：

// 补全useState导入
import { useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";

export default function Editor() {
    const [content, setContent] = useState("");
    console.log(content);
     
    return (
      <>
        <CodeMirror
          value={content}
          extensions={[
            markdown({ base: markdownLanguage, codeLanguages: languages }),
          ]}
          // 直接接收回调返回的最新内容值更新状态
          onChange={(value) => setContent(value)}
        />
      </>
    );
}

• 不要用原生表单元素的事件逻辑套封装后的CodeMirror组件，它的内容存储在自身编辑器实例中，不是直接挂载在页面原生textarea节点的value属性上，原生DOM取值方式不适用。
• 如果需要设置编辑器初始内容，直接给useState传入对应初始字符串即可，组件会自动完成同步。

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