React中如何阻止中文输入法上下键触发全局键盘事件？

核心解决方案：利用KeyboardEvent.isComposing属性 #

中文输入法在候选词选择阶段触发的上下键事件，会带有isComposing: true的标记，而普通上下键操作（比如切换输入历史）的该属性为false。直接通过这个属性就能区分两种场景：

修改后的按键处理逻辑 #

const handleKeyUp = async (event: KeyboardEvent) => {
    // 处于输入法候选词输入阶段时，直接跳过历史切换逻辑
    if (event.isComposing) return;

    if (event.key === 'ArrowUp') {
        event.preventDefault();
        const selected = inputValue && inputValue.length > 0 ? currInputIndex - 1 : currInputIndex;
        const stored = await getToIdb<Prompt>(selected);
        if (stored) {
            setInputValue(stored.name);
            setCurrInputIndex(selected);
        }
    }
};

const handleKeyDown = (event: KeyboardEvent) => {
    // keydown阶段同样做判断，避免不必要的默认行为触发
    if (event.isComposing) return;

    // 处理ArrowDown的历史切换逻辑
    if (event.key === 'ArrowDown') {
        event.preventDefault();
        const selected = inputValue && inputValue.length > 0 ? currInputIndex + 1 : currInputIndex;
        const stored = await getToIdb<Prompt>(selected);
        if (stored) {
            setInputValue(stored.name);
            setCurrInputIndex(selected);
        }
    }
};

补充：结合CompositionEvent做更严谨的状态兼容 #

如果部分输入法对isComposing属性支持不佳，可以通过绑定textarea的Composition事件维护状态，注意要将事件绑定到目标textarea元素上：

const [isComposing, setIsComposing] = useState(false);

// 在你的textarea组件上绑定事件
<textarea
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    onCompositionStart={() => setIsComposing(true)}
    onCompositionEnd={() => setIsComposing(false)}
/>

// 修改按键处理函数
const handleKeyUp = async (event: KeyboardEvent) => {
    if (isComposing) return;
    // ... 原有历史切换逻辑
};

onCompositionEnd会在用户选完候选词、确认输入后触发，状态会自动回到false，不会出现一直保持true的问题。

关于event.preventDefault()无效的说明 #

中文输入法候选词选择时的上下键默认行为属于输入法/浏览器的内部逻辑，在keyup阶段调用preventDefault()时机过晚，无法阻止默认行为。在keydown阶段提前判断并跳过逻辑，才是正确的处理方式。

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