Reagieren: Das Popup mit Suchvorschlägen bleibt geöffnet

Question

Ich versuche, ein Eingabefeld zu erstellen, in das der Benutzer etwas eingibt und basierend auf der Eingabe ein Vorschlags-Popup unter dem Eingabefeld mit dem vorgeschlagenen Inhalt angezeigt wird. In meinem Code werden die Vorschläge ganz gut angezeigt, aber wenn ich mehr eingebe, wird das vorherige Popup nicht geschlossen.

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>

Hier zeige ich meine Renderings. Die getSuggestions-Funktion lautet wie folgt:

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

In diesen Funktionen zeige ich ein Popup mit Suchvorschlägen an. Ich weiß, warum das Popup nicht geschlossen wird, denn wenn ich etwas eingebe, das mit den Vorschlagsdaten übereinstimmt, erhält die Variable der getSuggestions-Funktion den gefilterten Wert. Aus diesem Grund lässt sich das Popup nicht schließen. Ich möchte aber, dass die Suchvorschläge nur dann angezeigt werden, wenn der Eingabewert mit den Suchvorschlagsdaten übereinstimmt, andernfalls wird das Popup immer ausgeblendet.

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>
);