1

Contexto

Tengo un componente de react, específicamente un hook, el cuál devuelve un objeto con una función y también con un elemento JSX.

Problema:

Dentro del elemento JSX que estoy devolviendo, tengo un input con la propiedad ref en la cual puse un hook de useRef así como se muestra aquí:

  return {
    ChartLayout: (
      //estilos del contenedor del chart
      <ChartContainer
        theme={{
          width,
          height,
        }}
      >
        {/* input del date picker */}
        <input
          ref={datePickerRef}
          type="text"
          placeholder="Rango de consulta"
          id={datePickerId}
        />
        {/* etiqueta canvas que contiene el gráfico */}
        <canvas onContextMenu={handleContextMenu} ref={canvasRef}></canvas>

        <Menu
          open={contextMenu !== null}
          onClose={handleClose}
          anchorReference="anchorPosition"
          disableScrollLock={true}
          anchorPosition={
            contextMenu !== null
              ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
              : undefined
          }
        >
          <MenuItem onClick={exportData}>Descargar Excel</MenuItem>
          <MenuItem onClick={handleCompareWindow}>Abrir comparador de periodos</MenuItem>
          {chartTypes.map((e, i) => (
            <MenuItem key={i} onClick={() => handleChangeType(e.name)}>
              {e.translation}
            </MenuItem>
          ))}
        </Menu>
      </ChartContainer>
    ),
    exportData,
  };

Pero resulta que la referencia del input NUNCA se actualiza. Estoy haciendo lo típico de poner un useEffect escuchando cuando la referencia cambie de valor, pero ese useEffect me demuestra que no está cambiando de valor. Aquí está el useEffect:

  useEffect(() => {
    if (datePickerRef.current) {
      console.log(datePickerRef.current)
      flatpickr(datePickerRef.current, {
        mode: 'range',
        onChange: function (selectedDates, {}) {
          setFilter({
            inicio: selectedDates[0],
            fin: selectedDates[1],
          });
        },
        defaultDate: [filter.inicio, filter.fin],
      });
    }
  }, [datePickerRef]);

El El console.log que está dentro del if no sale en consola nunca, en cambio si lo pongo fuera del if, si sale una sola vez (que es cuando el useEffect se carga por defecto)

Sinceramente es de los problemas que no tengo absolutamente idea de qué es lo que puede estar pasando, por un momento pensé que depronto no podía llamar hooks dentro de ese hook que estaba creando pero no tiene sentido porque ya yo estoy utilizando varios hooks de useState y useCallback dentro de ese componente y funcionan bien.

Gracias de Antemano.

Edit

Este es el useRef que tengo:

  const datePickerRef = useRef(null as null | HTMLInputElement);
1
  • Actualizé la respuesta, espero que sea de ayuda. Si pudieras editar la pregunta especificando que se pretende convertir el input en un input de fecha una vez que el input se ha cargado en la página, saludos.
    – g.4
    Commented el 9 ene. 2022 a las 19:29

1 respuesta 1

1

En la documentacion de reactJS se puede leer lo siguiente:

useRef le dará el mismo objeto ref en cada render.

También:

seRef no le notifica cuando cambia su contenido. La mutación de la propiedad .current no provoca un re-render.

Entonces me parece que esto nunca va a pasar sin un re-render (devolución del componente):

Pero resulta que la referencia del input NUNCA se actualiza.

Siguiendo la documentación, no se va a modificar datePickerRef, la cual es parte del array de dependencias de useEffect, por lo tanto useEffect no se dispara mas que al montar el componente:

    useEffect(() => {
           //code...
            }
     //ReactJS: datePickerRef es un objeto useRef
     //no cambia su valor entre re-renders
     //useEffect no va a disparar nuevamente
   }, [datePickerRef]);

En resumen, no se debe usar un useRef, dentro de un array de dependencias.


Callback Ref

De acuerdo a tu último comentario:

lo que necesito es tener la instancia del input una vez se renderiza para de esa manera utilizar un módulo de fechas para convertir el input en un input de fecha con buenos estilos... el OnChange se me está disparando es cuando escribo en el input más no cuando se carga el input en la página

Se puede intentar usar un callback ref, de tal forma que se tenga acceso a nodo DOM del input despues de que se monté el componente:

const measuredRef = useCallback(node => {
    if (node !== null) {
      //aqui tengo acceso al nodo input
//<input type="text" placeholder="Rango de consulta" id="datePickerId">
      console.log("node",node);
    }
  }, []);

El input:

<input
    ref={measuredRef}
    type="text"
    placeholder="Rango de consulta"
    id="datePickerId"
/>

Finalmente, la callback ref:

  • Solo será llamada cuando el componente se monte/desmonte.
  • No va a cambiar entre re-renders, por la dependencia vacia, que me parece es lo que tambíen estas buscando.
1
  • No logro resolver el problema, lo que necesito es tener la instancia del input una vez se renderiza para de esa manera utilizar un módulo de fechas para convertir el input en un input de fecha con buenos estilos... el OnChange se me está disparando es cuando escribo en el input más no cuando se carga el input en la página :( Commented el 9 ene. 2022 a las 17:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.