React如何实现按Enter键触发三元表达式切换组件显隐

你遇到的类型错误本质是传参错位：
SearchableDropdown 组件没有定义onKeyDown这个对外属性，你传入的handleKeyDown函数被组件当成了接收字符串输入值的业务回调——组件预期这个位置的回调入参是string类型的输入框新值，但你写的函数入参是键盘事件对象，类型完全不匹配，所以直接抛错。
另外你最早版本写的onKeyUp={() => setShow(false)}逻辑也有问题，会导致用户按任意按键（比如输入字母、删字符）都直接切换到全局搜索，完全不符合「按Enter才判定收藏列表无匹配、切全局搜索」的需求。

分两种场景选方案即可：

方案1：快速修复（不用改SearchableDropdown组件源码） #

通过原生DOM绑定的方式监听输入框的Enter按键，不依赖组件暴露的自定义事件：

1. 引入React的useRef、useEffect Hook，创建DOM引用
2. 组件渲染完成后找到下拉框里的输入框元素，绑定keydown事件，判断按Enter时切换组件状态
3. 移除传给SearchableDropdown的无效onKeyDown属性
   完整实现代码：

import { useState, useRef, useEffect } from 'react';

// 组件内部逻辑
const [showFavorites, setShowFavorites] = useState(true);
const dropdownWrapRef = useRef(null);

const handleEnterTrigger = (e) => {
  if (e.key === 'Enter') {
    e.preventDefault();
    e.stopPropagation();
    setShowFavorites(false);
  }
};

useEffect(() => {
  if (showFavorites && dropdownWrapRef.current) {
    // 找到组件内部的输入框DOM
    const inputElement = dropdownWrapRef.current.querySelector('input');
    if (inputElement) {
      inputElement.addEventListener('keydown', handleEnterTrigger);
      // 组件销毁/切换时移除监听，避免内存泄漏
      return () => inputElement.removeEventListener('keydown', handleEnterTrigger);
    }
  }
}, [showFavorites]);

// 渲染部分
{showFavorites ? (
  <div ref={dropdownWrapRef}>
    <SearchableDropdown
      label="ICD-10 Code"
      showAddButton={false}
      showCaretIcon={true}
      options={fdata?.icdCodes?.map((code) => ({
        content: `${code.code}  -  ${code.description}`,
        key: code.id,
        value: code.id,
      }))}
      displayValue={state.icdCodes}
      value={searchIcd}
      onChange={(newValue) => {
        setState({
          ...state,
          icdCodes: newValue
        });
      }}
      onSelectOption={(option) => {
        setState({
          ...state,
          icdCodes: option?.content,
        });
      }}
    />
  </div>
) : (
  <Search
    label='ICD-10 Code'
    placeholderText={valid ? "Search for an ICD-10 code" : searchText}
    searchText={searchIcd}
    setSearchText={setSearchIcd}
    searchFunction={icdAction}
  />
)}

方案2：长期优化（可维护性更好） #

如果SearchableDropdown是你团队自研的组件，直接给组件加一个onKeyDown的prop透传：在组件内部找到原生<input>元素，把外部传入的onKeyDown绑到原生input的keydown事件上，之后你就可以直接给组件传onKeyDown={handleKeyDown}，不用额外套div查DOM。

• 可以给全局搜索组件加一个回收藏列表的触发逻辑：比如输入框内容清空时自动切回收藏列表，或者在输入框旁加个小按钮，避免用户误触Enter后没法快速回到常用代码列表。
• 如果SearchableDropdown本身支持传入input的ref（比如prop名是inputRef/innerRef），可以直接把ref传给对应prop，省去querySelector查DOM的步骤，性能更好。

内容的提问来源于stack exchange，提问作者swanus