Estoy aprendiendo a reaccionar y quiero crear un formulario simple donde el valor de entrada cambia y se actualiza una vez que el usuario lo escribe. Tengo este código donde el valor de entrada actualiza el estado cuando se escribe, pero cuando presiono enter, el el antiguo estado vuelve. Hice muchas búsquedas en Google, pero parece que no puedo hacer que funcione. Lo he intentado con un botón de enviar en el formulario, pero eso no hace la diferencia. Me gustaría que funcione sin un botón de envío como en los cambios de valor y actualizaciones solo en Cambio. ¿Qué no estoy viendo?
import React, { useState } from 'react'; function App() { const [value, setValue] = useState('John'); const handleInputOnChange =(e)=> { setValue(e.target.value) }; return ( <div className="App"> <form> <label> Name: <input value={value} onChange={handleInputOnChange}/> </label> </form> </div> ); } export default App;Está sucediendo debido a la etiqueta de form . Cada vez que presione Intro, el form se enviará de forma predeterminada y el valor de la input volverá a su valor inicial.
Hay dos maneras de evitar que esto suceda.
1.) Elimine la etiqueta de form de su componente de App .
2.) Agregue la función onSubmit al form para manejar el form cuando se envía como se muestra a continuación.
<form onSubmit={onSubmit}>...</form> Y la función para manejar el form es la siguiente:
const onSubmit = (e) => { e.preventDefault() } El método preventDefault detendrá el comportamiento default del form cuando se envíe.