onFocus 与热键反应以专注于页面上任何位置的元素

Question

我正在尝试使用 shift + 数字创建热键，以专注于我网页上的某个元素。在 JavaScript 中，您在定位元素后使用 .focus() 但在反应中我很困惑。我有大约 5 个组件需要关注热键按下。我目前有代码可以运行按键，还有运行一个函数，但我不知道如何进行。

我知道 onFocus 只会运行当我在此处选择或单击输入时......但我不知道如何像条件合成事件那样做。和热键一样？ onFocus : 空


//app.js

 function useKey(key, cb) {
    const callbackRef = useRef(cb);

    useEffect(() => {
      callbackRef.current = cb;
    });

    useEffect(() => {
      function hotkeyPress(e) {
        if (e.shiftKey && e.keyCode === key) {
          callbackRef.current(e);
        }
      }

      document.addEventListener('keydown', hotkeyPress);
      return () => document.removeEventListener('keydown', hotkeyPress);
    }, [key]);
  }

 <ContactInfo
          searchValue={searchValue}
          handleSearchChange={handleSearchChange}
          onSearchCloseClick={onSearchCloseClick}
          onSearchClick={onSearchClick}
          useKey={useKey}
        />
    

//component to use

 function handleKeypress() {
    //?
  }

 <input
        className='contactSearchForm__input'
        placeholder='Customer name/number'
        type='text'
        list='searchList'
        value={searchValue}
        onChange={handleSearchChange}
        onFocus={useKey(49, handleKeypress)}
      />

Answer 1

所以我做的有点太多了。这就是您使用 React 在页面上使用热键定位和聚焦不同元素所需的全部。我最终将其更改为 f 键，但您也可以使用 shift + 数字键或任何其他键。

//app.js
 function useKey(key, ref) {
    useEffect(() => {
      function hotkeyPress(e) {
        if (e.keyCode === key) {
          e.preventDefault();
          ref.current.focus();
          return;
        }
      }

      document.addEventListener('keydown', hotkeyPress);
      return () => document.removeEventListener('keydown', hotkeyPress);
    }, [key]);
  }

//component to use
const f1Ref = useRef();
  useKey(112, f1Ref);

      <input
        className='contactSearchForm__input'
        placeholder='Customer name/number'
        type='text'
        list='searchList'
        value={searchValue}
        onChange={handleSearchChange}
        ref={f1Ref}
      />

onFocus 与热键反应以专注于页面上任何位置的元素

onFocus react with hotkeys to focus on elements anywhere on page

javascript

onfocus

reactjs

use-effect

use-ref