React：搜索建议弹出窗口保持打开状态

Question

我正在尝试构建一个输入框，用户将在其中输入内容，根据输入内容，在输入框下方会出现一个建议弹出窗口，显示建议内容。在我的代码中，建议内容显示得很好，但当我输入更多内容时，之前的弹出窗口不会关闭。

return <div className="border border-gray-400 rounded-md mx-10 my-10 h-10 relative">
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="w-full border-none absolute inset-0 z-10 outline-none px-2 text-sm bg-transparent"
        style={{ WebkitTextFillColor: "transparent" }}
        maxLength={maxLength}
      />
      <div className="text-sm absolute inset-0 flex items-center px-2 whitespace-pre">
        {value.split(" ").map((word, i) => {
          const isHighlighted = word.toLowerCase().includes(suggestions[0]);
          return (
            <div className="relative" key={i}>
              {isHighlighted ? (
                <>{getHighlightedSyntex(word, i)}</>
              ) : (
                getSyntex(word, i)
              )}
              {getSuggestions(word)}
            </div>
          );
        })}
      </div>
    </div>

这是我展示我的渲染的地方。getSuggestions函数如下：

const getSuggestions = (word) => {
    const matchedPartialSuggestions = suggestions.filter(
      (item) => word !== "" && item.toLowerCase().startsWith(word.toLowerCase())
    );
    console.log('va', word, matchedPartialSuggestions)
    return (
      <>
        {matchedPartialSuggestions.length > 0 && (
          <div className="absolute z-10 p-2 bg-white border rounded shadow-lg">
            {matchedPartialSuggestions?.map((item, i) => {
            return <p key={i}>{highlightMatching(word, item)}</p>;
            })}
          </div>
        )}
      </>
    );
  };

在这些函数中，我展示了包含搜索建议的弹出窗口。我知道为什么弹出窗口不会关闭，因为当我输入与建议数据匹配的内容时，getSuggestions函数的变量得到了过滤后的值。这就是为什么弹出窗口不会关闭。但是我只希望在输入值与搜索建议数据匹配时显示搜索建议，否则弹出窗口将始终隐藏。

Answer 1

您面临的问题是，当您继续输入时，之前的弹出建议没有被清除。

要解决这个问题，您需要管理建议弹出框的可见性并控制其显示。以下是您的代码的更新版本，应该能够处理这个问题：

return (
  <div className="border border-gray-400 rounded-md mx-10 my-10 relative">
    <input
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
        setShowSuggestions(true); // 当输入发生变化时显示建议
      }}
      onBlur={() => {
        setTimeout(() => setShowSuggestions(false), 200); // 当输入失去焦点时隐藏建议
      }}
      onFocus={() => setShowSuggestions(true)} // 当输入获得焦点时显示建议
      className="w-full border-none absolute inset-0 z-10 outline-none px-2 text-sm bg-transparent"
      style={{ WebkitTextFillColor: "transparent" }}
      maxLength={maxLength}
    />
    <div className="text-sm absolute inset-0 flex items-center px-2 whitespace-pre">
      {value.split(" ").map((word, i) => {
        const isHighlighted = word.toLowerCase().includes(suggestions[0]);
        return (
          <div className="relative" key={i}>
            {isHighlighted ? (
              <>{getHighlightedSyntex(word, i)}</>
            ) : (
              getSyntex(word, i)
            )}
            {showSuggestions && getSuggestions(word)} {/* 当showSuggestions为true时显示建议 */}
          </div>
        );
      })}
    </div>
  </div>
);