Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

375
Vistas
(React.js) ¿Cómo deshabilitar las entradas hasta que se ingrese la entrada anterior?

Tengo un elemento de entrada devuelto por una matriz de cadenas como la imagen a continuación. ¿Cómo puedo escribir el componente de entrada para que las entradas posteriores estén deshabilitadas hasta que el usuario ingrese la entrada actual? Los usuarios solo pueden comenzar con la entrada desde la parte superior izquierda y luego moverse hacia la derecha en consecuencia.

 function() { return ( <div> {strArr.map((item, index) => ( <input /> ))} </div> )}

¡Gracias por tu ayuda!

ingrese la descripción de la imagen aquí

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

  • En primer lugar, establezca el estado y llámelo como isActive
  • En segundo lugar, proporcione a su entrada un identificador como id que puede ser igual al actual
  • Entonces, por defecto, su estado se inicializará con 0;
  • Establezca la propiedad deshabilitada de su entrada dinámicamente, si isActive no es igual al estado actual, se deshabilitará,
 function() { const [isActive, setIsActive] = React.useState(0); const handleOnInputChange = (index)=>{ setIsActive(index+1) } return ( <div> {strArr.map((item, index) => ( <input ket={index} id={index} disabled={isActive !== index} onChange={()=>handleOnInputChange(index)}/> ))} </div> )}
  • Esto funcionará si solo tiene que escribir un solo carácter en su entrada
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda