当按下“Enter”时，如何编写隐藏组件的三元结构？

Question

我正在开发一个应用程序，允许医生在手术或其他程序中填写收纳表。在应用程序的另一页上，医生可以从整个代码列表中选择最喜欢的代码。“录取表”的一个组件是一个输入字段，用于搜索医生最喜欢的CPT和ICD-10代码。问题是医生在填写录取表时不想进入最喜欢的代码组件来设置最喜欢的代码组件。我创建了另一个输入组件，它搜索最喜欢的代码列表+全局代码列表。我的目标是创建一个显示最喜欢的代码组件的三元结构，但是当按下enter (假设他们正在寻找的代码不在收藏夹列表中)时，它将隐藏，并且显示收藏夹+全局列表的组件将是可见的。

我是第一个对这个冗长的问题道歉的人。如果你需要看其他代码，请告诉我。

{show === true ?
            <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
                });
              }}
              onKeyUp = {() => setShow(false)}
              onSelectOption={(option) => {
                setState({
                  ...state,
                  icdCodes: option?.content,
                });
              }}
            />
            : 
            <Search
             label='ICD-10 Code'
             placeholderText={valid ? (
               "Search for an ICD-10 code"
               ) : (
                 searchText
               )}
             searchText={searchIcd}
             setSearchText={setSearchIcd}
             searchFunction={icdAction}
            />

最爱列表

全局列表

编辑:我收到一个错误声明："(e: any，显示: any) => void‘不能分配到'(newDisplayValue: string) => any'“。

   const handleKeyDown = (event) => {
      if (event.key === 'Enter') {
          event.preventDefault();
          event.stopPropagation();
          setShowFavorites(false);
          console.log('keydown')
      }
  }


 {showFavorites === true ?
            <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
                });
              }}
              onKeyDown={handleKeyDown}
              onSelectOption={(option) => {
                setState({
                  ...state,
                  icdCodes: option?.content,
                });
              }}
            />
            : 
            <Search
             label='ICD-10 Code'
             placeholderText={valid ? (
               "Search for an ICD-10 code"
               ) : (
                 searchText
               )}
             searchText={searchIcd}
             setSearchText={setSearchIcd}
             searchFunction={icdAction}
            />
          }

Answer 1

您的show变量应该是条件呈现的状态(考虑更多的描述性名称)：

const [showFavorites, setShowFavorites] = useState(true);

那么您的键盘处理程序应该如下所示：

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

和分别在<SearchableDropdown>中

onKeyDown={handleKeyDown}

Answer 2

若要修改用户在输入中按enter时的状态，可以执行以下操作：

  const handleKeyUp = (e) => {
    if(e.key !== "Enter") return;
    //do your logic here
  };
  //...
  <input ... onKeyUp={handleKeyUp} />