0
211
VistasMe gustaría cambiar solo el color del texto del enlace del encabezado en el que se hizo clic con reaccionar
Empecé a aprender a codificar recientemente y a crear mi cartera. Estoy trabajando en el encabezado y me gustaría cambiar la etiqueta del enlace del encabezado del color del texto cuando solo se hace clic una vez. Cuando hice clic en el enlace, el color del texto cambió a rojo y cuando hice clic en el enlace ahora, pero cuando hago clic en otro enlace, el enlace anterior sigue siendo rojo.
Me gustaría volver a cambiar el color del texto de rojo a gris cuando hago clic en otro. Ejemplo:- OK - casa sobre contacto de habilidad laboral NO - casa sobre contacto de habilidad laboral
Encabezado.jsx
import React, { useState } from "react"; import { Link as ScrollLink } from "react-scroll"; const Header = (props) => { const { headerPage } = props; const [onClickChangeColor, setOnClickChangeColor] = useState(false); const redText = () => { setOnClickChangeColor(!onClickChangeColor); }; return ( <div class="mr-8 cursor-pointer"> <ScrollLink className={onClickChangeColor ? "text-[#FF5757]" : ""} onClick={redText} to={headerPage} smooth={true} duration={500} > {headerPage} </ScrollLink> </div> ); }; export default Header;HeaderLayout.jsx
import React from "react"; import Header from "./Header"; const HeaderLayout = () => { const headerPages = ["home", "about", "work", "skill", "contact"]; return ( <div class="sticky top-0 flex justify-end h-20 text-md pt-10 mr-10 text-center bg-[#292929]"> {headerPages.map((headerPage) => ( <Header headerPage={headerPage}>{headerPage}</Header> ))} <div className="resume" class="w-24 h-8 text-[#FF5757] border border-[#FF5757] rounded-md" > <a href="https://drive.google.com/file/d/usp=sharing" class="block" > resume </a> </div> </div> ); }; export default HeaderLayout;Estoy usando React y Tailwind. El inglés es mi segundo idioma y espero que todos entiendan lo que quiero hacer. Gracias de antemano.
2 Respuestas
Responde la pregunta0
Puede rastrear el índice del elemento seleccionado en el componente HeaderLayout y luego usarlo para decidir el color del elemento del encabezado dependiendo de eso.
- Agregue otro estado para mantener el estado del elemento de encabezado seleccionado en
HeaderLayout.
const [selectedIndex, setSelectedIndex] = useState(-1);- Proporcione
headerIndex,selectedIndexysetSelectedIndexcomo accesorios para el componenteHeader.
{headerPages.map((headerPage, headerIndex) => ( <Header headerPage={headerPage} setSelectedIndex={setSelectedIndex} selectedIndex={selectedIndex} headerIndex={headerIndex} > {headerPage} </Header> ))}- En el componente
Header, obtenga los accesorios y configure el elemento de encabezado CSS como se muestra a continuación.
const { headerPage, selectedIndex, setSelectedIndex, headerIndex } = props; ... ... <ScrollLink className={headerIndex === selectedIndex ? "text-[#FF5757]" : ""} onClick={() => setSelectedIndex(headerIndex)} to={headerPage} smooth={true} duration={500} >Demostración de trabajo
0
cambie el estado de manejo del color a principal (Diseño de encabezado)
const HeaderLayout = () => { const headerPages = ["home", "about", "work", "skill", "contact"]; const [selectedHeader, changeSelectedHeader] = useState(""); return ( <div class="sticky top-0 flex justify-end h-20 text-md pt-10 mr-10 text-center bg-[#292929]"> {headerPages.map((headerPage) => ( <Header headerPage={headerPage} changeSelectedHeader={changeSelectedHeader} selectedHeader={selectedHeader} > {headerPage} </Header> ))}entonces, haz que el niño sea así
import React from "react"; import { Link as ScrollLink } from "react-scroll"; const Header = (props) => { const { headerPage, changeSelectedHeader, selectedHeader } = props; const redText = () => { changeSelectedHeader(headerPage); }; return ( <div class="mr-8 cursor-pointer"> <ScrollLink className={headerPage === selectedHeader ? "text-[#FF5757]" : ""} onClick={redText} to={headerPage} smooth={true} duration={500} > {headerPage} </ScrollLink> </div> ); }; export default Header;