Блоки ввода горячих клавиш - PullRequest
Новая
       6

Блоки ввода горячих клавиш

0 голосов
/ 22 января 2020

Используется 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>
  )
}

1 Ответ

1 голос
/ 22 января 2020

Я нашел 3 ошибки здесь,

  1. По умолчанию горячие клавиши отключены для элементов INPUT SELECT 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>
  )
}
...