Estoy tratando de pasar la pestaña de campos de entrada al siguiente campo una vez que se alcanza la longitud máxima, pero sigo recibiendo un error Failed to execute 'querySelector' on 'Document': 'name=2' is not a valid selector. . He leído la explicación de mozialla de un querySelector y he intentado usar la id de elementos para enfocar () pero eso da el mismo error. Supongo que no entiendo cómo crear correctamente un selector para pasar al querySelector.
Mis campos de entrada solo muestran 2, tengo 3:
<Input onChange={dateChange("month")} value={date.month} id="1" maxLength={2} type="number" /> <span className="sep">/</span> <Input onChange={dateChange("day")} value={date.day} name="2" id="2" maxLength={2} type="number" />Mi onChange:
const dateChange = (field) => (e) => { const fieldIndex = e.target.name; let fieldIntIndex = parseInt(fieldIndex, 10); // format to fit let value = e.target.value; if (value.length === e.target.maxLength) { if (fieldIntIndex < 3) { const nextfield = document.querySelector( `name=${fieldIntIndex + 1}` ); console.log(nextfield); if (nextfield !== null) { nextfield.focus(); } } } const d = { ...date, [field]: value }; setDate(d); debounceCallback(handleDateInputChange, d); };Todavía estoy aprendiendo, así que cualquier consejo sobre esto sería genial :) ¡gracias de antemano!
En primer lugar, creo que es incorrecto establecer detectores de eventos como este:
onChange={dateChange("month")}Si lo hace de esa manera, en realidad ejecuta esa función durante la representación de la página. La función debe ejecutarse cuando ocurra el evento. La forma correcta de hacerlo sería:
onChange={dateChange}Si también desea agregar parámetros a su función, debe hacerlo así:
onChange={dateChange.bind(this, "month")}Además, con respecto al selector de consultas, creo que la sintaxis correcta sería:
const nextfield = document.querySelector(`input[name='${fieldIntIndex + 1}']`); Su prop de nombre se establece en un elemento de entrada, por lo que usamos input[name].
También el nombre tiene un valor de cadena, por lo que usamos input[name=''].
Finalmente, queremos establecer el valor del nombre de forma paramétrica, por lo que usamos `input[name='${parameter}']`.
Puede encontrar la documentación de MDN de la función bind JavaScript aquí y la documentación de querySelector aquí .
Editar: otra alternativa para navegar entre las entradas sería el atributo tabindex. Puedes encontrar más sobre esto aquí .
El nombre es una cadena, así que creo que deberías hacerlo así (agregar corchetes) name='${fieldIntIndex + 1}'