React : la fenêtre contextuelle de suggestions de recherche reste ouverte

Question

J'essaie de créer une zone de saisie dans laquelle l'utilisateur tapera quelque chose et, en fonction de la saisie, une fenêtre contextuelle de suggestion apparaîtra sous la zone de saisie affichant le contenu suggéré. Dans mon code, les suggestions s'affichent très bien, mais lorsque j'en tape davantage, la fenêtre contextuelle précédente ne se ferme pas.

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>

C'est ici que je montre mes rendus. La fonction getSuggestions est la suivante :

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

Dans ces fonctions, j'affiche une fenêtre contextuelle avec des suggestions de recherche. Je sais pourquoi la fenêtre contextuelle ne se ferme pas, car lorsque j'entre quelque chose qui correspond aux données des suggestions, la variable de la fonction getSuggestions obtient la valeur filtrée. C'est pourquoi la fenêtre contextuelle ne se ferme pas. Mais je souhaite uniquement que les suggestions de recherche s'affichent lorsque la valeur d'entrée correspond aux données de suggestion de recherche, sinon la fenêtre contextuelle sera toujours masquée.

Answer 1

Le problème auquel vous êtes confronté est que lorsque vous continuez à taper, les suggestions contextuelles précédentes ne sont pas effacées.

Pour résoudre ce problème, vous devez gérer la visibilité de la popup de suggestion et contrôler son affichage. Voici une version mise à jour de votre code qui devrait gérer cela :

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