面试题：React中如何实现组合快捷键功能

Question

假设在一个React应用的文本输入框组件中，需要实现一个组合快捷键功能，比如当用户同时按下Ctrl（或Command，针对Mac系统）和S键时，触发保存操作（这里保存操作简单模拟为在控制台打印'保存成功'），请详细描述实现思路并给出完整代码实现。

Answer 1

实现思路

1. 在React组件中，通过useEffect钩子来监听键盘事件。
2. 识别按下的是Ctrl（或Command）和S键组合，当组合键按下时执行保存操作。
3. 在组件卸载时移除事件监听器，避免内存泄漏。

完整代码实现

import React, { useEffect } from 'react';

const TextInputWithSaveShortcut = () => {
  useEffect(() => {
    const handleKeyDown = (event) => {
      const isCtrlOrCommand = event.ctrlKey || event.metaKey;
      if (isCtrlOrCommand && event.key === 's') {
        event.preventDefault();
        console.log('保存成功');
      }
    };
    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  return <input type="text" placeholder="输入文本" />;
};

export default TextInputWithSaveShortcut;