onFocus使用热键进行反应，将焦点集中在页面上任何位置的元素上

Question

我正在尝试使用shift+number创建热键，以集中在我的网页上的一个元素上。在JavaScript中，你在定位元素后使用.focus((，但在react中我很困惑。我有大约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+number或任何其他键。

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