Next.js项目中@monaco-editor/react的onClick点击事件无法触发如何解决？

• @monaco-editor/react 组件未对外暴露onClick属性，你直接传递给组件的onClick回调不会被组件处理，也不会透传到编辑器内部的DOM节点上，因此无法触发。

在编辑器挂载完成的onMount回调中，通过monaco编辑器实例提供的原生事件接口绑定点击监听即可，这里推荐使用onMouseDown事件覆盖全场景点击交互：

import Editor from "@monaco-editor/react";
import { useRef, useState } from "react";

export default function MyEditor(){
    const editorRef = useRef(null);
    const [code,setCode]=useState("");

    function handleEditorDidMount(editor, monaco) {
        editorRef.current = editor;
        // 在这里绑定点击监听
        editor.onMouseDown(() => {
            alert("Clicked");
        })
    }

    function onChange(e) {
        setCode(e);
    }

    return(<Editor
            height="90vh"
            defaultLanguage="javascript"
            defaultValue="// some comment"
            value={code}
            onMount={handleEditorDidMount}
            onChange={onChange}
     />);
}

• 如果需要获取点击的具体坐标、所在代码行、字符位置等信息，可以从onMouseDown回调的事件参数中读取对应字段。
• 若你确实需要绑定原生DOM的click事件，也可以通过editor.getDomNode()获取编辑器的容器DOM节点后手动绑定。

内容的提问来源于stack exchange，提问作者Mohammad Reza Hosainy