输入块热键

Question

使用hotkey.js绑定热键引用下面的片段。输入阻塞我的热键，因为焦点。现在，无论输入是否集中，我都需要启用热键。

import React from 'react'
import hotkeys from 'hotkeys-js'

export default function Example (props) {
  useEffect(() => {
    hotkeys('Enter', event => {
      event.preventDefault()

      return props.handleSubmit()
    })

    return () => {
      hotkeys.unbind('Enter')
    }
  }, [])

  return (
    <div>
      <input type='text' autofocus />
      <button onClick={props.handleSubmit}>Submit</button>
    </div>
  )
}

Answer 1

我在这里发现了三个错误，

1. 默认情况下，对于输入，将禁用热键，选择TEXTAREA元素。需要添加代码块以启用热键。
2. 您不需要导入useEffect。
3. 我认为hotKeys回调不需要返回。

添加此代码块以启用阻塞元素中的热键。

 hotkeys.filter = function(event){
  var tagName = (event.target || event.srcElement).tagName;
  hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');
  return true;
}

检查工作小提琴

这是工作小提琴示例代码。

import React, {useEffect} from 'react'
import hotkeys from 'hotkeys-js'

export default function Hello (props) {
  useEffect(() => {
    hotkeys.filter = function(event){
      var tagName = (event.target || event.srcElement).tagName;
      hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 
      'input' : 'other');
      return true;
    }
    hotkeys('Enter', event => {
      event.stopPropagation()
      event.preventDefault()
      console.log('Hotkey Pressed')
      props.handleSubmit(); // this should do the job.
    })

    return () => {
      hotkeys.unbind('Enter')
    }
  }, [])

  return (
    <div>
      <input type='text' autoFocus />
      <button onClick={props.handleSubmit}
      >Submit</button>
    </div>
  )
}