有没有办法在使用键盘 TAB 时关闭结果列表？

【问题标题】：Is there a way to close the result list when using keyboard TAB?有没有办法在使用键盘 TAB 时关闭结果列表？
【发布时间】：2023-01-24 20:50:52
【问题描述】：

我有一个状态isSearchActive这将决定 ResultList 是否显示。我只想在表格外使用 TAB 键时关闭 ResultList

<form
  ref={innerRef} 
>
 <input/>
 <ResultList></ResultList>
 <button/>

</form>

我曾尝试将逻辑用于 handleClickOutside 函数，但触发速度太快，因此当我退出时，我将表单作为我的目标，并且状态不会触发

 if (innerRef?.current?.contains(e.target)) return
 setIsSearchActive(false)

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您可以在表单元素上使用 focusout 事件而不是 click 事件。当焦点移出表单元素时，将触发此事件，无论它是移动到表单内还是表单外的另一个可聚焦元素。

您可以为表单元素上的 focusout 事件添加一个事件侦听器，并相应地更新状态。

useEffect(() => {
  innerRef.current.addEventListener('focusout', handleFocusOut);
  return () => {
    innerRef.current.removeEventListener('focusout', handleFocusOut);
  };
}, [innerRef]);

const handleFocusOut = (e) => {
  setIsSearchActive(false);
}

这样，只要焦点移出表单元素，就会调用 handleFocusOut 函数并将 setIsSearchActive 设置为 false。

【讨论】：