NextJS中xterm.js自定义按键处理器执行两次问题求助

问题根源 #

你的自定义按键处理器执行两次，大概率是因为xterm.js的attachCustomKeyEventHandler会同时监听keydown和keypress事件（像Backspace这类按键会触发这两个事件），导致同一按键操作触发两次回调；另外，你的useEffect依赖数组中包含了不必要的eventHandlerAttachedRef，虽不会直接引发问题，但易造成逻辑混乱。

解决方案 #

1. 过滤事件类型：只在keydown事件时执行自定义逻辑，避免重复触发。
2. 清理依赖数组：移除eventHandlerAttachedRef，因为ref对象的引用是稳定的，且其current属性变化不会触发useEffect重新执行。
3. 增强事件阻止：添加event.preventDefault()和event.stopPropagation()，确保彻底阻止浏览器和xterm的默认行为。
4. （可选）使用xterm内置方法：用xterm提供的backspace()或deleteCharacter()替代手动的"\b \b"写法，更贴合xterm内部逻辑。

修改后的代码 #

useTerminal.tsx

import { useEffect, useRef } from "react";
import { Terminal } from "@xterm/xterm";

const useTerminal = (terminalElRef: React.RefObject<HTMLElement>) => {
  const termRef = useRef<Terminal | null>(null);
  const eventHandlerAttachedRef = useRef<boolean>(false);

  useEffect(() => {
    if (terminalElRef.current && !termRef.current) {
      const term = new Terminal();
      termRef.current = term;

      term.open(terminalElRef.current);
      term.focus();
      term.onData((data) => term.write(data));

      if (!eventHandlerAttachedRef.current) {
        console.log("attaching...");
        term.attachCustomKeyEventHandler((event: KeyboardEvent) => {
          // 只处理keydown事件，避免重复触发
          if (event.type !== "keydown") return true;

          if (["Backspace", "Delete"].includes(event.key)) {
            console.log("delete");
            // 阻止浏览器和xterm的默认行为
            event.preventDefault();
            event.stopPropagation();
            
            // 可选：使用xterm内置方法替代手动写法
            if (event.key === "Backspace") {
              term.backspace();
            } else {
              term.deleteCharacter();
            }
            
            return false;
          }

          return true;
        });

        eventHandlerAttachedRef.current = true;
      }
    }

    const cleanup = () => {
      if (termRef.current) {
        termRef.current.dispose();
        termRef.current = null;
        eventHandlerAttachedRef.current = false;
      }
    };

    return cleanup;
  }, [terminalElRef]); // 移除eventHandlerAttachedRef依赖

  return terminalElRef;
};

export default useTerminal;

额外说明 #

• 移除eventHandlerAttachedRef依赖后，useEffect只会在terminalElRef变化时重新执行，符合预期逻辑。
• 使用xterm内置的backspace()和deleteCharacter()方法，能更好地适配终端的光标和字符管理，避免手动拼接控制字符可能带来的兼容性问题。

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