0
195
Vistas¿Cómo agregar un atributo al div principal con ClassName en ReactJS?
Estoy usando la navegación de pestañas de la interfaz de usuario de material de ReactJS. Quiero agregar un atributo llamado tabindex en un div con class=MuiTabs-flexContainer MuiTabs-centered con valor -1 para sus nodos secundarios. Lo intenté pero tabindex=-1 se agrega a otro lugar:
Aquí, en esta captura de pantalla, necesito tabindex=-1 en sus nodos secundarios, es decir, elementos de button :
Aquí está la parte de las pestañas de la interfaz de usuario:
<Tabs value={value} id="tabSec"> <Tab label={ <span className={value === 0 ? "active-tab" : "custom-style-on-tab"}> ABC </span> } /> <Tab label={ <span className={value === 1 ? "active-tab" : "custom-style-on-tab"}> XYZ </span> } /> </Tabs>;La función que he hecho hasta ahora es:
const tabRoving = (element) => { element.addEventListener("keydown", function (e) { if (e.keyCode === 13) { if (element.contains(document.activeElement)) { element.childNodes.forEach(function (childElement) { if (childElement != document.activeElement) { childElement.setAttribute("tabindex", "-1"); console.log("done"); } else childElement.setAttribute("tabindex", "0"); }); } } }); }; useEffect(() => { tabRoving(document.getElementById("tabSec")); }, []);¿Cómo puedo conseguir esto? ¿Es esto posible en ReactJS con material UI?
1 Respuestas
Responde la pregunta0
¿Ha intentado pasar un tabIndex={-1} prop en el componente Tab ? Debería extender los accesorios no utilizados hacia abajo, eventualmente hasta el botón.
Herencia
Si bien no se ha documentado explícitamente anteriormente, los accesorios del componente ButtonBase también están disponibles en Tab. Puede aprovechar esto para apuntar a componentes anidados.
Los accesorios proporcionados a un componente que no están explícitamente documentados se extienden al elemento raíz; por ejemplo, la propiedad
classNamese aplica a la raíz.
Pase un tabIndex prop a los componentes de la Tab :
<Tabs value={value} id="tabSec"> <Tab tabIndex={-1} label={ <span className={value === 0 ? "active-tab" : "custom-style-on-tab"}> ABC </span> } /> <Tab tabIndex={-1} label={ <span className={value === 1 ? "active-tab" : "custom-style-on-tab"}> XYZ </span> } /> </Tabs>