如何修复React CodeMirror应用中editorRef.current.on不是函数的错误？

错误原因 #

你使用的@uiw/react-codemirror是封装后的React组件，它的ref指向的是组件实例而非原生CodeMirror编辑器对象，因此组件实例上不存在原生编辑器的on方法。此外，该组件已经内置了onChange回调，无需手动绑定原生change事件。

修复方案 #

1. 移除无效的事件绑定，使用组件内置回调 #

直接利用组件提供的onChange属性处理代码变化，同时通过ref.current.editor访问真实编辑器实例进行操作（比如设置焦点）。

修改后的完整代码 #

import React, { useEffect, useRef, useState } from 'react';
import CodeMirror from '@uiw/react-codemirror'
import { atomone } from '@uiw/codemirror-theme-atomone'
import { javascript } from '@codemirror/lang-javascript';
import { cpp } from '@codemirror/lang-cpp';


const Editor = ({ socketRef, roomId, onCodeChange }) => {
    const editorRef = useRef(null);
    const [code, setCode] = useState('');

    useEffect(() => {
        // 组件挂载后设置编辑器焦点
        if (editorRef.current?.editor) {
            editorRef.current.editor.focus();
        }
    }, [])

    // 处理代码变化，同时触发父组件回调或socket事件
    const handleCodeChange = (value) => {
        setCode(value);
        if (onCodeChange) {
            onCodeChange(value);
        }
        console.log('代码已更新:', value);
    }

    return <CodeMirror
        theme={atomone}
        extensions={[javascript(), cpp()]}
        value={code}
        style={{ flex: 1, textAlign: 'left' }}
        height="100vh"
        onChange={handleCodeChange}
        ref={editorRef}
    />
};

export default Editor;

2. 监听其他编辑器事件（可选） #

如果需要监听change之外的编辑器事件，可以通过extensions添加自定义扩展：

import { EditorView } from '@codemirror/view';

// 在extensions数组中添加事件监听逻辑
extensions={[
  javascript(), 
  cpp(),
  EditorView.updateListener.of((update) => {
    if (update.docChanged) {
      // 文档内容变化时触发
      console.log('文档更新:', update.state.doc.toString());
    }
  })
]}

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