ReactJS - Función onClick en PivotItem

Val: 7

Función onClick en PivotItem

Publicado por Juan José (13 intervenciones) el 21/07/2021 16:24:48

Hola buenas,

Estoy intentando sacar información de una bbdd que contiene informes, estos informes tienen diferentes estados.
Cada uno de los estados se distingue por un numero entero (0,1,2 y 3)

Lo que estoy intentando es añadir en cada etiqueta

<PivotItem />

una función para que cada vez que se pulse el botón de cada pestaña se haga una petición.

<Pivot overflowBehavior="menu" styles={estilosPivot}>

                            <PivotItem className="PivotItemClass" itemKey="1" headerText="Abiertas" onClick={()=>console.log("Hola")}>

                                <div className="ContenedorPivotItemClass">

                                    {jsonLista===null ? "" : <DocumentCard Datos={jsonLista}/>}

                                </div>

                            </PivotItem>

</Pivot>

Y esto no me funciona correctamente, una ayudita

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Función onClick en PivotItem

Publicado por Juan José Ramos Martínez (13 intervenciones) el 30/07/2021 09:49:46

Solucionado:

const handleLinkClick = (item?: PivotItem) => {

        if (item) {

            setLastHeader(item?.props.itemKey);

            //Crear un efecto a toda la pantalla?

            fetch("URL", ParametrosPost(item?.props.itemKey, FiltrosOrdenTrabajo))

                .then(response => response.json())

                .then((data) => {

                    if (data.success === "1") {

                        return JSON.parse(data.datos);

                    else {

                        return data.mensaje;

                }).then(setJsonListaOrdenesTrabajo);

};

 <Pivot

                overflowBehavior="menu"

                aria-label="Pivot sobre las ordenes de trabajo que tendrá cada usuario"

                styles={estilosPivot}

                selectedKey={lastHeader}

                onLinkClick={handleLinkClick}

                headersOnly={true}

                <PivotItem itemKey="0" headerText='Pendientes' />

                <PivotItem itemKey="1" headerText='Abiertas' />

                <PivotItem itemKey="2" headerText='Iniciadas' />

                <PivotItem itemKey="3" headerText='Cerradas' />

                <PivotItem itemKey="4" headerText='Todas' />

            </Pivot>

             <div className="ContenedorPivotItemClass">

                {jsonListaOrdenesTrabajo.length === 0 ?

" No hay datos para mostrar" :

<DocumentCardOrdenesTrabajosOrdenTrabajoSeleccionada={OrdenTrabajoElegida} JsonInformacion={jsonListaOrdenesTrabajo} />}

            </div>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar