Hice un componente de reacción que agrega un borde cuando se hace clic. Ahora tengo 3 componentes similares en la misma página. Cuando hago clic en cualquiera de ellos, agrega un borde. Cuando hago clic en cualquiera de los otros componentes restantes, quiero que el borde se elimine del primero y se agregue al segundo. Además, si hago clic en cualquier lugar del documento que no sean los componentes, se debe eliminar el borde existente, si lo hay. Logré lo mismo usando Vanilla Js pero no pude implementarlo usando reaccionar. Cualquier ayuda es apreciada.
import React from 'react' function NavItem() { const menu = { initial: "noborder", final: "border", }; const [itemStyle, setItemStyle] = useState(""); const handleClick=()=>{ setItemStyle(final) } return ( <div onClick={handleClick} className={`${itemStyle}`}>NavItem</div> ) } export default NavItemEleve el estado a un componente principal. Pase el estado seleccionado a cada componente secundario. Use un enlace de efectos para conectar un controlador de eventos global para capturar clics en otras partes del documento.
const Parent = () => { const [selected, setSelected] = React.useState(null); console.log(selected); React.useEffect(() => { const clearSelected = () => setSelected(null); window.addEventListener("click", clearSelected); return () => window.removeEventListener("click", clearSelected); }, []); const values = ["a", "b", "c"]; return ( <div> {values.map((value) => ( <Child key={value} value={value} selected={value === selected} setSelected={setSelected} /> ))} </div> ); }; const Child = ({ value, selected, setSelected }) => { console.log({ setSelected, selected, value }); return ( <button type="button" className={selected ? "selected" : "not-selected"} onClick={(e) => { e.stopPropagation(); setSelected(value); }} > {value} </button> ); }; ReactDOM.render(<Parent />, document.getElementById("root"));Su problema es que llama a setState por separado para cada NavItem y no tiene el componente principal común para compartir ese estado, por lo que debe elevar sus estados al componente principal
Supongo que tiene un componente principal llamado Nav
import React from 'react' import NavItem from './NavItem' function Nav() { const menu = { initial: "noborder", final: "border", }; const [activeNavItem, setActiveNavItem] = useState(1); //active the first `NavItem` //you can reduce duplication by `map` or depends on your setup return <> <NavItem itemStyle={activeNavItem === 1 ? menu.final : menu.initial } handleClick={() => setActiveNavItem(1)}>Item 1</NavItem> <NavItem itemStyle={activeNavItem === 2 ? menu.final : menu.initial } handleClick={() => setActiveNavItem(2)}>Item 2</NavItem> <NavItem itemStyle={activeNavItem === 3 ? menu.final : menu.initial } handleClick={() => setActiveNavItem(3)}>Item 3</NavItem> </> } export default Nav Ahora tiene el mismo estado para todos los NavItem
import React from 'react' function NavItem({ itemStyle, handleClick }) { return ( <div onClick={handleClick} className={`${itemStyle}`}>NavItem</div> ) } export default NavItem