Tengo una función que activa onClick que agrega bordes al elemento en el que se hizo clic.
Aquí está el código en el componente:
import { useEffect, useState } from 'react'; import Link from 'next/link'; import Logo from '../../components/logo.svg'; import React from 'react'; import getConfig from 'next/config'; import { useRouter } from 'next/router'; const { publicRuntimeConfig: { domain }, } = getConfig(); export default function MediaNav() { // If router equals link in list, show blue border const router = useRouter(); const menu = ['Home', 'FAQs', 'Contact Us', 'Social Media']; const [selectedPage, setPage] = useState({ borderColor: '', }); const handleLinkClick = e => { setPage({ borderStyle: '3px solid #005ba9', }); e.target.style.borderLeft = selectedPage.borderStyle; e.target.style.borderRight = selectedPage.borderStyle; }; return ( <nav> <div> <Link href={`${domain}`}> <a> <Logo /> </a> </Link> </div> <ul > <div> <ul> <li > <a href="/subdomain/link">All Sites</a> </li> </ul> <ul > {menu.map((item, i) => { return ( <li key={i}> <Link href={item === 'Home' ? '/subdomain/link' : `/subdomain/${item}`.replace(/\s+/g, '').toLowerCase()}> <a onClick={handleLinkClick}> {item} </a> </Link> </li> ); })} </ul> ) : null} </div> </ul> </nav> ); }En este momento, cuando se hace clic en el elemento de la lista de enlaces, se aplica el borde azul; sin embargo, si hago clic en otro enlace, quiero que se eliminen los bordes del enlace del elemento en el que hice clic anteriormente.
Como se trata de NextJs y tengo una etiqueta de Link que envuelve el elemento de enlace, no se está cargando, por lo tanto, no sé cómo diferenciar entre el elemento en el que se hizo clic anteriormente y el elemento en el que se hizo clic actualmente.
¿Alguna idea de cómo eliminar los bordes del enlace en el que ya se ha hecho clic cuando se hace clic en el siguiente enlace?
Creo que un mejor enfoque para este problema sería tener un estado para guardar la currentPage usuario de la página actual y, dependiendo del estado de la currentPage , dar un estilo a a elemento.
import { useEffect, useState } from 'react'; import Link from 'next/link'; import Logo from '../../components/logo.svg'; import React from 'react'; import getConfig from 'next/config'; import { useRouter } from 'next/router'; const { publicRuntimeConfig: { domain }, } = getConfig(); export default function MediaNav() { // If router equals link in list, show blue border const router = useRouter(); const menu = ['Home', 'FAQs', 'Contact Us', 'Social Media']; const [currentPage, setCurrentPage] = useState('') const handleLinkClick = pageName => { setCurrentPage(pageName); }; return ( <nav> <div> <Link href={`${domain}`}> <a> <Logo /> </a> </Link> </div> <ul > <div> <ul> <li > <a href="/subdomain/link">All Sites</a> </li> </ul> <ul> {menu.map((item, i) => { return ( <li key={i}> <Link href={item === 'Home' ? '/subdomain/link' : `/subdomain/${item}`.replace(/\s+/g, '').toLowerCase()}> <a onClick={() => handleLinkClick(item)} style={{ border: currentPage === item ? '3px solid #005ba9': 'initial' }}> {item} </a> </Link> </li> ); })} </ul> </div> </ul> </nav> ); }Creo que en lugar de agregar un estilo en un elemento de destino, puede intentar agregar una clase, digamos highlight en el elemento.
la clase de resaltado se vería así:
.highlight { border-left: '3px solid #005ba9', border-right: '3px solid #005ba9' } Entonces, solo los elementos que tienen esta clase mostrarían los estilos de borde aplicados. Dado que los componentes se volverían a representar en los cambios de estado, asegúrese de aplicar la clase de highlight en el enlace en la lógica de la función de map . Esto aseguraría que otros elementos no tengan esta clase y esto resolvería el problema.
PD: La eliminación de los estilos aplicados previamente sería tediosa. Creo que la solución anterior funcionaría sin muchos problemas y funcionaría muy bien.