Estoy tratando de lograr un Formulario donde primero vea 2 y luego, cuando haga clic en un botón, vea otra Entrada. Estoy usando un interruptor en el que, en función de un valor, devuelvo los primeros 2 o los otros. Intenté devolver solo el , devolviendo un formulario con las entradas, pero todo me da el mismo problema. Después de completar las dos primeras entradas de texto, cuando cambio a las otras, las primeras 2 de esas entradas tienen los valores de las 2 entradas anteriores.
Gracias por tu ayuda.
Aquí hay una versión básica del código.
function renderSwitch() { switch (currentPhase) { case 0: return ( <div> <input name='email' type='email' placeholder='Inserisci email' /> </div> ); break; case 1: return ( <div> <input name='surname' type='text' placeholder='Inserisci Cognome...' /> </div> ); break; } return ( <div className='registerpage' style={{ height: '100vh', backgroundColor: 'white' }} > <div className='formdiv'> <form onSubmit={handleSubmit}> {renderSwitch()} {currentPhase < 1 && ( <button onClick={() => nextPhase()}>Next</button> )} {currentPhase > 0 && ( <button onClick={() => previousPhase()}>Back</button> )} <br /> <button type='submit'>Iscriviti</button> </form> </div> </div> ); }Debe almacenar los valores de entrada usando un estado:
const [email, setEmail] = useState('') const [surname, setSurname] = useState('') function renderSwitch() { switch (currentPhase) { case 0: return ( <div> <input value={email} name='email' type='email' placeholder='Inserisci email' /> </div> ); break; case 1: return ( <div> <input value={surname} name='surname' type='text' placeholder='Inserisci Cognome...' /> </div> ); break; } }Y luego reinícielos una vez que haya enviado sus datos:
function handleSubmit(e) { e.preventDefault() // Handler your data... setEmail('') setSurname('') }