0
177
Vistas¿Cómo pasar el foco de entrada cuando se hace clic?
Estoy usando next js para mi aplicación y estoy diseñando un campo de búsqueda. Las sugerencias comienzan a aparecer una vez que el usuario escribe algo, pero me gustaría ocultarlo cuando la barra de entrada no está enfocada.
Cuando el usuario vuelva a hacer clic en él, me gustaría volver a mostrarlo. Las sugerencias de búsqueda contienen rutas, por lo que no puedo usar onFocus y onBlur porque el elemento pierde el foco cuando registro un clic y la ruta ocurre solo cuando lo suelto.
También probé css, pero no puedo registrar el enfoque, ¿o hay alguna manera?
¡¡Por favor, ayúdame!!
Aquí está mi código de muestra:
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> }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Podrías hacer esto con 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>Aplicar lo anterior en reaccionar podría verse así:
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> ); 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta