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);
se pretende convertir el input en un input de fecha una vez que el input se ha cargado en la página
, saludos.