Hotkeys-js -如何解绑我的热键？

Question

我正在使用hotkeys-js和绑定Enter，它会触发提交函数并关闭对话框。在关闭时，我尝试解绑我的热键，但我的热键一直被绑定。我还尝试像handleHotkey: Function = event => hotkeys.unbind('Enter', this.handleHotKey) && this.handleSubmit()一样解除绑定

import React, { Component } from 'react'

export default class Basis extends Component {
  state = {
    open: true,
  }

  handleClose: Function = () => {
    this.setState({ open: false })
  }

  render() {
    const { open } = this.state

    return (
      <>
        {open && <Dialog onClose={this.handleClose}/>}
      </>
    )
  }
}


// @flow
import React, { Component } from 'react'
import hotkeys from 'hotkeys-js'

export default class Dialog extends Component {
  componentDidMount () {
    hotkeys('Enter', this.handleHotkeys)
  }

  componentWillUnmount () {
    hotkeys.unbind('Enter', this.handleHotkeys)
  }

  handleHotkey: Function = event => this.handleSubmit()

  handleSubmit: Function = () => {
    console.log(12)
  }

  render () {
    return (
      <>
        <button onClick={this.handleSubmit}>Submit</button>
      </>
    )
  }
}

Answer 1

可能组件无法卸载。尝试将其与onSubmit方法解除绑定

handleSubmit: Function = () => {
    console.log(12);
    hotkeys.unbind('Enter');
  }

但是如果你想在声明之后管理热键，最好使用setScope

setScope
Use the hotkeys.setScope method to set scope. There can only be one active scope besides 'all'. By default 'all' is always active.

// Define shortcuts with a scope
hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){
  console.log('do something');
});
hotkeys('o, enter', 'files', function(){ 
  console.log('do something else');
});

// Set the scope (only 'all' and 'issues' shortcuts will be honored)
hotkeys.setScope('issues'); // default scope is 'all'
getScope
Use the hotkeys.getScope method to get scope.

hotkeys.getScope();
deleteScope
Use the hotkeys.deleteScope method to delete a scope. This will also remove all associated hotkeys with it.

hotkeys.deleteScope('issues');