Javascript 反应热键cntrl+；s当焦点在文本区域时

我试图能够使用cntrl+s，同时使用react热键在文本区域内聚焦

this.keyMap = {
        KEY: "ctrl+s"
      };
  
      this.handlers = {
        KEY: (e) => {
            e.preventDefault();
            this.saveBtn(c);
        }
      };


<HotKeys keyMap={this.keyMap} handlers={this.handlers}>
   <textarea/>
 </HotKeys>

this.keyMap={
键：“ctrl+s”
};
此参数为0.1={
键：（e）=>{
e、 预防默认值（）；
这是saveBtn（c）；
}
};

您需要使用

Control+s

，而不是

ctrl+s

您需要这样调用

configure

，这样它就不会忽略文本区域：

从“反应热键”导入{configure}；
配置({
ignoreTags:[]
});

---

以下不是解决方案，但它满足了要求

[请注意]基本上我限制了对浏览器中Ctrl键的访问，然后 不过效果不错

从'react HotKeys'导入{HotKeys}；
从“React”导入React，{PureComponent，Component}；
从“反应热键”导入{configure}；
常量颜色=[‘绿色’、‘紫色’、‘橙色’、‘灰色’、‘粉色’]；
常量操作键映射={
键：“Control+s”，
};
类登录扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
this.changeColor=this.changeColor.bind（this）；
配置({
ignoreTags:['div']
});
此.state={
颜色编号：0
};
}
变色（e）{
e、 预防默认值（）；
this.setState（（{colorNumber}）=>（{colorNumber:colorNumber===COLORS.length-1？0:colorNumber+1}））；
}
按键向下（e）{
如果（e.ctrlKey）e.preventDefault（）；
}
render（）{
常量处理程序={
钥匙：这个。换颜色
};
const{colorNumber}=this.state；
常量样式={
宽度：200，
身高：60，
左:20,，
前20名，
不透明度：1，
背景：颜色[颜色编号]，
};
返回(
);
}
}
导出默认登录；

你能解释一下这个问题吗？对不起，解释得不清楚。当前，如果im在文本区域内键入并尝试使用cntrl+s，则在文本区域内聚焦时将无法工作。只有在文本区域外单击并单击cntrl+s，它才会工作并保存。我需要能够在文本区域内使用热键cntrl+s

import { HotKeys } from 'react-hotkeys';

import React, { PureComponent, Component } from 'react';
import { configure } from 'react-hotkeys';


const COLORS = ['green', 'purple', 'orange', 'grey', 'pink'];

const ACTION_KEY_MAP = {
  KEY: 'Control+s',
};

class Login extends Component {
  constructor(props, context) {
    super(props, context);

    this.changeColor = this.changeColor.bind(this);
    configure({
      ignoreTags: ['div']
    });
  
    this.state = {
      colorNumber: 0
    };
  }

  changeColor(e) {
    e.preventDefault();
    this.setState(({ colorNumber }) => ({ colorNumber: colorNumber === COLORS.length - 1 ? 0 : colorNumber + 1 }));
  }

  KeyDown(e){
    if(e.ctrlKey) e.preventDefault();
  }
  render() {
    const handlers = {
      KEY: this.changeColor
    };

    const { colorNumber } = this.state;
    const style = {
      width: 200,
      height: 60,
      left: 20,
      top: 20,
      opacity: 1,
      background: COLORS[colorNumber],
    };

    return (

      <HotKeys
        keyMap={ACTION_KEY_MAP}
        handlers={handlers}        
      >
          <textarea 
            style={style}
            className="node"
            tabIndex="0"
            onKeyDown={this.KeyDown}
          ></textarea>
       
      </HotKeys>


    );
  }
}

export default Login;