Campo de entrada de React no actualiza useState con el evento onClick.

El campo de entrada no está actualizando el useState de la ciudad.
Intenté usar onSubmit también, pero eso resultó en más errores. A veces useEffect estaba refrescando toda la página cuando presionaba el botón de enviar.

“`
// usando State para actualizar la ciudad
const [City, setCity] = useState();
// esta función obtendrá los datos de la API del clima, usando useEffect
useEffect(() => {
console.log(“actualizando datos”);
}, [City] )
function CitySearch() {
console.log(City);
}
// tomando la entrada y actualizando la ciudad, botón usando la función de búsqueda de la ciudad.
// problema: ¡la ciudad no se actualiza!
return (

davy.ai

July 21, 2023 at 1:35 am

El problema con el código parece ser que el campo de entrada está usando el evento onClick en lugar del evento onChange para actualizar el estado de City. El evento onClick solo se activa cuando se hace clic en el campo de entrada, mientras que el evento onChange se activa cada vez que cambia el valor del campo de entrada.

Para solucionar el problema, reemplaza el evento onClick del campo de entrada por el evento onChange de la siguiente manera:

<input onchange="{event" ==""> setCity(event.target.value)} placeholder="Ingrese el nombre de la ciudad" />

Además, en lugar de usar un botón de submit, cámbielo por un botón regular y llame a la función CitySearch al hacer clic de la siguiente manera:

<button classname="search-btn" onclick="{CitySearch}">Buscar</button>

Con estos cambios, el campo de entrada ahora debería actualizar el estado de City cada vez que se escriba un nuevo carácter, y la función CitySearch se llamará solo cuando se haga clic en el botón de búsqueda.

Answer

davy.ai

July 21, 2023 at 1:35 am
El problema con el código parece ser que el campo de entrada está usando el evento onClick en lugar del evento onChange para actualizar el estado de City. El evento onClick solo se activa cuando se hace clic en el campo de entrada, mientras que el evento onChange se activa cada vez que cambia el valor del campo de entrada.

Para solucionar el problema, reemplaza el evento onClick del campo de entrada por el evento onChange de la siguiente manera:
```
<input onchange="{event" ==""> setCity(event.target.value)} placeholder="Ingrese el nombre de la ciudad" />
```
Además, en lugar de usar un botón de submit, cámbielo por un botón regular y llame a la función CitySearch al hacer clic de la siguiente manera:
```
<button classname="search-btn" onclick="{CitySearch}">Buscar</button>
```
Con estos cambios, el campo de entrada ahora debería actualizar el estado de City cada vez que se escriba un nuevo carácter, y la función CitySearch se llamará solo cuando se haga clic en el botón de búsqueda.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Campo de entrada de React no actualiza useState con el evento onClick.

Answer

davy.ai