Según el código que ha proporcionado, parece que no está configurando su estado en ningún cambio. Una buena práctica sería establecer un controlador, que se activará cuando se cambie el valor de la entrada; esto establecerá el valor respectivo en su estado.

Además, dado que está haciendo de esto una entrada controlada, recomendaría agregar el valor del estado como su atributo de valor. De esta manera, puede manejarlo directamente a través del estado (por ejemplo, si desea restablecerlo).

 const YourComponent = () => { const [name,setName] = useState(""); const nameChangeHandler = (e) => { setName(e.target.value) }; return ( <div className="App"> <div class="inputfield"> <label>Campaign Name</label> <input type='text' required maxLength='20' onChange={nameChangeHandler} value={name} className="input"/> </div> </div> };

Para más información, también puedes consultar la documentación oficial .

Aquí hay un ejemplo de cómo configuro el estado para los valores de entrada.

Asegúrese de establecer esto fuera del componente (antes de definir el componente).

 let initialValues = { city: '' }

 const [quote, setQuote] = useState(initialValues)

 <input type="text" value={ quote.city || "" } name="city" onChange={ onChange } />

 const onChange = (e) => { setQuote({...quote, [e.target.name]: e.target.value}); };

puede tener tantos valores clave dentro de initialValues const. Asegúrese de definir el nombre de la entrada junto con el valor que apunta al objeto de estado y un evento onChange que maneja la configuración. ¡Feliz codificación!

Para realizar un cambio simple con el código que tiene, simplemente puede volver a escribir el método onChange para el elemento de entrada.

 onChange={(e) => setName(e.target.value)}