React中Fabric.js添加事件监听后画布激活文本无法编辑求助

问题根源在于你全局绑定的keydown事件里的event.preventDefault()——它会拦截所有键盘输入，包括文本编辑时的字符输入、退格等关键操作，导致激活的文本对象无法接收编辑指令。

修复步骤 #

1. 优先判断文本编辑状态：在处理自定义快捷键前，先检查当前是否有文本对象处于激活编辑状态，若有则跳过自定义逻辑，让键盘事件正常传递。
2. 精准阻止默认事件：只在处理你的自定义快捷键（方向键、复制/剪切/粘贴）时调用event.preventDefault()，不要全局拦截所有键盘操作。

修改后的代码示例 #

const { editor, onReady } = useFabricJSEditor();
useEffect(() => {
  if (!editor || !fabric) {
    return;
  }

  const handleKeyDown = (event: any) => {
    const activeObj = editor.canvas.getActiveObject();
    // 关键判断：如果是正在编辑的文本对象，直接返回不处理
    if (activeObj?.type === 'text' && activeObj.isEditing) {
      return;
    }

    const code = event.which || event.keyCode;
    let charCode = String.fromCharCode(code).toLowerCase();
    let shouldPreventDefault = false;

    if (code >= 37 && code <= 40) {
      moveSelected(
        code === 37 ? [-1, 0] : 
        code === 38 ? [0, -1] : 
        code === 39 ? [1, 0] : [0, 1], 
        editor
      );
      shouldPreventDefault = true;
    } else if ((event.ctrlKey || event.metaKey)) {
      if (charCode === 'x') {
        copy(editor);
        removeSelectedObject(editor);
        shouldPreventDefault = true;
      } else if (charCode === 'c') {
        copy(editor);
        shouldPreventDefault = true;
      } else if (charCode === 'v') {
        paste(editor);
        shouldPreventDefault = true;
      }
    }

    // 仅在处理自定义快捷键时阻止默认行为
    if (shouldPreventDefault) {
      event.preventDefault();
    }
  };

  const handleKeyUp = (e: any) => {
    if (e.keyCode === 46) {
      const obj: any = editor?.canvas.getActiveObject();
      if (obj && !obj.isEditing) {
        editor?.canvas.remove(obj);
      }
    }
  };

  window.addEventListener('keydown', handleKeyDown);
  window.addEventListener('keyup', handleKeyUp);
  
  return () => {
    window.removeEventListener('keydown', handleKeyDown);
    window.removeEventListener('keyup', handleKeyUp); // 补充移除keyup监听，避免内存泄漏
  };
}, [editor]);

额外注意事项 #

• 移除了全局的event.preventDefault()，改为按需调用，避免干扰正常的文本输入流程。
• 补充了keyup事件的移除逻辑，防止组件卸载后残留事件监听导致内存泄漏。
• 简化了方向键的判断逻辑，保持功能不变的同时提升代码可读性。

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