如何在 React 中正确创建 cmd+K 键盘快捷键？

Question

我制作了一个 keydown/keyup 脚本，当按下 cmd+k 时会触发一个搜索栏。我面临的问题是当我按住 cmd 键时浏览器无法识别。对于“K”键，默认情况下似乎有自动重复，因此我只需按住“K”并按 Cmd 即可显示搜索栏。

我要反过来。如何按住 Cmd 并按另一个键 (K) 来启动我的搜索栏？

class Dashboard extends Component {
    
    state = {
        showSearch: "",
        HideShowSearch: false,
    };


HideShowSearch = (e) => {
        var map = {};
        let HideShowSearch = this.state.HideShowSearch;
        var self = this;
        onkeydown = function (e) {
            e = e;

            map[e.keyCode] = e.type === "keydown";

            // Cmd + K
            if (map[75] && map[91]) {
                self.setState(() => ({ HideShowSearch: !HideShowSearch }));
            }
        };
    };

render() {
        this.HideShowSearch();
        return (
            <div>
                <div className="row align-items-center">
                    <div className="container col-12">
                        {this.state.HideShowSearch ? (
                            <Searchbox
                                onChange={this.onTextChanged}
                                item={this.state.items}
                                onKeyPress={this.handleKeyPress}
                                text={this.state.text}
                                suggestions={this.renderSuggestions()}
                                onKeyDown={this.onKeyDown}
                            />
                        ) : null}
                    
                    </div>
                </div>
            </div>
        );
    }

Answer 1

e.keyCode === 75 && e.metaKey 在两个方向上产生所描述的行为（不完全相反）

class Test extends React.Component {

  handleKeyDown = (e) => {
    if (e.keyCode === 75 && e.metaKey) {
      console.log("search")
    }
  };

  render() {
    return <input onKeyDown = {this.handleKeyDown}/>
  }

}

ReactDOM.render( < Test / > , document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何在 React 中正确创建 cmd+K 键盘快捷键？

How to properly create a cmd+K keyboard shortcut in react?

javascript

keyboard

keyboard-shortcuts

keydown

reactjs