es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Devolver diferentes en un formulario utilizando un switch para devolver el Input.

30 May, 2023 Programación

Estoy intentando lograr un formulario en el que primero se vean 2 y luego, al hacer clic en un botón, se vea otro Input. Estoy usando un switch en el que, en función de un valor, devuelvo los primeros 2 o los otros. He intentado devolver solo el , devolver un formulario con los inputs, pero todo me da el mismo problema. Después de completar los primeros dos inputs de texto, cuando cambio a los otros, los primeros 2 de esos inputs tienen los valores de los 2 inputs 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>
);
}
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar el problema de que los primeros dos campos mantengan sus valores al cambiar al siguiente conjunto de campos de entrada, debes asegurarte de que estás borrando los valores de los primeros dos campos antes de renderizar el segundo conjunto de campos de entrada.
    Aquí tienes una versión actualizada 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>
  );
}

// Clear input values before switching phases
function nextPhase() {
  // Get the first two input fields
  const inputs = Array.from(document.querySelectorAll('input')).slice(0, 2);
  // Clear their values
  inputs.forEach(input => input.value = '');
  setCurrentPhase(currentPhase + 1);
}

function previousPhase() {
  // Get the first two input fields
  const inputs = Array.from(document.querySelectorAll('input')).slice(0, 2);
  // Clear their values
  inputs.forEach(input => input.value = '');
  setCurrentPhase(currentPhase - 1);
}

    En esta versión actualizada del código, hemos agregado dos funciones, nextPhase() y previousPhase(), que se llaman cuando se hacen clic en los botones “Next” y “Back”, respectivamente. Estas funciones obtienen los primeros dos campos de entrada usando querySelectorAll('input') y cortan el array para incluir solo los primeros dos elementos. Luego, recorren estos campos de entrada y establecen sus valores en una cadena vacía, borrándolos efectivamente.

    Esto asegura que cuando se renderiza el siguiente conjunto de campos de entrada, los primeros dos campos estén vacíos y no conserven sus valores anteriores.

Comments are closed.