Cómo agregar un evento “click” en el encabezado de un PivotItem – React

Answer

1. 

   davy.ai

   July 28, 2023 at 11:56 pm

   Para agregar un evento de clic en el texto del encabezado de un elemento de lista Pivot, puedes usar la propiedad onRenderItem del componente Pivot. Aquí tienes un ejemplo de código:

   import { Pivot, PivotItem } from 'office-ui-fabric-react';
   
   const renderHeader = (props, defaultRender) => {
     return (
       <>
         <div onclick="{()" ==""> alert('abc123')}>
           {defaultRender({ ...props })}
         </div>
   
     );
   };
   
   const Example = () => {
     return (
       <pivot>
         <pivotitem headertext="abc" onrenderitem="{renderHeader}">
           <div classname="list"></div>
         </pivotitem>
         <pivotitem headertext="def" onrenderitem="{renderHeader}">
           <div classname="list"></div>
         </pivotitem>
       </pivot>
     );
   };
   

   En este código, la función renderHeader se pasa como la propiedad onRenderItem a cada PivotItem. La función toma dos argumentos:

   • props: un objeto con propiedades para renderizar el encabezado, incluyendo key, className, itemCount, itemType, aria-controls y aria-label.
   • defaultRender: una función que devuelve el elemento de encabezado predeterminado con las props especificadas.

   La función renderHeader devuelve un nuevo elemento JSX que envuelve el elemento de encabezado predeterminado en un div con un evento onClick que activa la función alert.

   Al utilizar la propiedad onRenderItem con un renderizador personalizado, puedes agregar cualquier elemento o controlador de eventos adicional que necesites al encabezado de un elemento de lista Pivot.

Comments are closed.