Hay cuatro botones. Actualmente puede mover el enlace con un solo clic. Sin embargo, debe hacer doble clic en el botón para activar el color del botón.
Quiero activar el enlace y el botón con un clic. ¿Sería posible obtener alguna ayuda?
Barra lateral.js
const [selectBtn, setSelectBtn] = useState(); {SETTING_BAR_ICON.map(data => { return ( <SidebarIcon key={data.id} src={data.img} select={data.select} link={data.link} handleChangeBtnColor={() => setSelectBtn(data.id)} isSelectBtn={selectBtn === data.id} /> ); })}SidebarIcon.js
<SidebarIconContainer> {isSelectBtn ? ( <ImgBackground> <ImgSelect src={select} /> <ImgText>{link}</ImgText> </ImgBackground> ) : ( <Link to={`/${link}`}> <ImgFormat src={src} onClick=. {handleChangeBtnColor} /> </Link> )} </SidebarIconContainer>En primer lugar, nunca cierre el corchete de la función en la propiedad handleChangeBtnColor de SidebarIcon . Necesitas un } antes de /> . También necesita que los dos métodos de adentro estén envueltos entre corchetes. Cuando use funciones de flecha, use corchetes todo el tiempo, mienta esto:
const doSomething = () => { ... }A menos que solo tenga una cosa para regresar adentro, entonces puede omitir el corchete como este:
// shorthand const doSomething = () => doAThing() const getSomething = () => 'thing' // same as this const doSomething = () => { return doAThing() } const getSomething = () => { return 'thing' } // if you go to the next line you should use parenthesis const doSomething = () => ( doAThing() ) Pero no creo que eso lo arregle. En lugar de usar una etiqueta de Link , use el useNavigation y cambie la ruta en la función handleChange... . Así que algo como esto:
import { useNavigate } from 'react-router-dom' const navigate = useNavigate() return ( <SidebarIcon ... handleChangeBtnColor={(link) => { setSelectBtn(data.id) isSelectBtn={selectBtn === data.id} navigate(`/${link}`) }} /> ) <DivStyledLikeYourOtherLinks onClick={() => handleChangeBtnColor(link)} />