单击时如何传递输入焦点？

Question

我正在为我的应用程序使用下一个 js，并且我正在设计一个搜索字段。一旦用户键入内容，建议就会开始出现，但我想在输入栏不在焦点时隐藏它。

当用户再次点击它时，我想将其显示回来。搜索建议包含路线，因此我无法使用onFocus 和onBlur，因为当我注册点击时元素会失去焦点，并且路线仅在我释放它时才会发生。

我也试过css，但是无法注册焦点，或者有什么办法吗？

请帮帮我！！

这是我的示例代码：

const [suggestionState,setSuggestionState] = useState(false);


<input type="input"
                    
  ref={inputRef}
  autoFocus
  className={styles['search-bar-input']}
  onFocus={()=>{setSuggestionState(true)}}
  onBlur={()=>{setSuggestionState(false)}}
  placeholder="Search Bloggo"
  onChange={(e)=>{

      var trimmedQuery = e.target.value;
      trimmedQuery = trimmedQuery.trim(); 
      setSearchQuery(trimmedQuery);
      getSuggestions(trimmedQuery)

  }}
  onKeyDown={(e)=>{handleKeypress(e)}}

/>
{

searchQuery.length == 0 || suggestionState == false? '':

<div className={styles['search-bar-suggestions']}>
  <Link>... </Link>
</div>
}

Answer 1

您可以使用 css :focus-within 来做到这一点

.suggestions {
  display: none;
}

form:focus-within .suggestions {
  display: block;
}

input:focus~.suggestions {
  display: block;
}

<form>
  <input type="input" placeholder="Search Bloggo" value="">
  <div class="suggestions">Suggestions...
    <div><a href="#">Suggestion 1</a></div>
    <div><a href="#">Suggestion 2</a></div>
    <div><a href="#">Suggestion 3</a></div>
    <div><a href="#">Suggestion 4</a></div>
  </div>
</form>

---

在反应中应用上述内容可能看起来像这样：

import "./styles.css";
import { useState, useEffect } from "react";

export default function App() {
  const [searchQuery, setSearchQuery] = useState("");
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (!searchQuery) {
      setResults([]);
      return;
    }
    fetch(`https://rickandmortyapi.com/api/character/?name=${searchQuery}`)
      .then((response) => response.json())
      .then(({ results }) => setResults(results));
  }, [searchQuery]);

  return (
    <form>
      <input
        value={searchQuery}
        type="input"
        autoFocus
        placeholder="Search Bloggo"
        onChange={(e) => {
          setSearchQuery(e.target.value);
        }}
      />

      {!!results.length && (
        <div className={`suggestions `}>
          <h3>Suggestions</h3>
          {results.map((result) => {
            return (
              <Link key={result.id} url={result.url}>
                {result.name}
              </Link>
            );
          })}
        </div>
      )}
    </form>
  );
}

const Link = ({ url, children }) => (
  <div>
    <a href={url}>{children}</a>
  </div>
);