输入块热键

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

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

默认情况下，INPUT SELECT TEXTAREA 元素的热键是禁用的。需要添加代码块以启用热键。
您没有导入 useEffect。
我认为 hotKeys 回调不需要 return。

添加此代码块以在被阻止的元素中启用热键

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

Check the working fiddle

这是有效的 fiddle 示例代码。

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>
  )
}

输入块热键

Input blocks hotkeys

reactjs

hotkeys