Hola novato aquí escribiendo mi primera pregunta, tengo un campo de entrada y cuando escribo filtrará un archivo json y mostrará los lugares coincidentes que comienzan con la misma letra (estoy tratando de crear una barra de búsqueda de autocompletar para una aplicación meteorológica ). el problema que tengo es que cuando hago clic en uno de los elementos, no establece el texto de entrada en lo que he estado haciendo clic ... ¡cualquier ayuda sería genial! ¡Gracias!
Codesandbox aquí: https://codesandbox.io/s/exciting-fire-vhvl5w
import data from "./city2.list.json"; const SearchBar = () => { const [input, setInput] = useState(""); const [matchesArray, setMatchesArray] = useState([]); const [city, setCity] = useState(""); const getCitySuggestions = (input) => { let matches = []; if (input !== "") { for (let i = 0; i < data.length && matches.length < 10; i++) { if (data[i].name.toLowerCase().startsWith(input.toLowerCase())) { matches.push({ id: data[i].id, long: data[i].coord.lon, lat: data[i].coord.lat, name: data[i].name, country: data[i].country, }); setMatchesArray(matches); } } } return matches; }; useEffect(() => { getCitySuggestions(input); }, [input]); const handleClick = (e) => { e.preventDefault(); let a = setCity(e.target.value); console.log("city is..", a); }; return ( <div> <form onSubmit={(e) => handleClick(e)}> <input type="text" name="search" id="search" placeholder="search..." onChange={(e) => setInput(e.target.value)} /> <button type="submit">search..</button> {matchesArray.map((item, index) => ( <div onClick={(e) => handleClick(e)} value={item.name} key={index}> {item.name} </div> ))} </form> </div> ); }; export default SearchBar;```En realidad, está pasando detalles incorrectos en la función. Déjame compartir la forma correcta.
Ahora:
<div onClick={(e) => handleClick(e)} value={item.name} key={index}> {item.name} </div>Debiera ser:
<div onClick={handleClick.bind(this, item)} value={item.name} key={index}> {item.name} </div>Y la función debería gustar:
const handleClick = (item) => { setInput(item.name) };Pruebe esto, esto resolverá su problema de archivo de entrada.
Simplemente puede pasar el nombre de la ciudad como argumento al método onClick .
{matchesArray.map((item, index) => ( <div onClick={() => handleClick(item.name)} value={item.name} key={item.id} > {item.name} </div> ))} Luego, dentro del método handleClick , establezca el nombre de la ciudad y la entrada.
const handleClick = (cityName) => { setCity((prev) => cityName); setInput((prev) => cityName); };