Изменить стиль выбранного элемента

Question

У меня есть навигация, и я хочу изменить стиль элемента, выбранного в элементе списка навигации. Я использую реагирующий элемент Grid для Material-UI.

Navigate.tsx:

import React, { useState, useEffect } from "react";
import { Grid } from "@material-ui/core";
import './Navigate.css';
import history from '../../history';

const Navigate = () => {
    const [itemStyle, setItemStyle] = useState("nav-item");

    useEffect(() => {
        window.addEventListener('click', handleSelectedItem);
      });

    const handleSelectedItem = (event:any) => {
        setItemStyle("nav-item");
        event.target.classList.add("selected");
        const selectedItem = event.target.id;
        history.push('/GeneralPage/' + selectedItem);
    }

    return (
        <div className="navigate-comp">
            <Grid container direction="column" justify="center" alignItems="center" spacing={2}>
                <Grid item id="Books"
                 className={itemStyle}>
                    Books Management
                </Grid>
                <Grid item id="Authors"
                 className={itemStyle}>
                    Authors Management
                </Grid>
                <Grid item id="Users"
                 className={itemStyle}>
                    Users Management
                </Grid>
            </Grid>
        </div>
    );
}

export default Navigate;

Навигация. css:

.nav-item {
    cursor: pointer;
    text-align: center; 
    background-color: none;
    width: 100%;
}

.selected{
    background-color: hotpink;
}

Я хочу изменить стиль выбранного элемента для «выбранного» класса. Как я могу это сделать?

Answer 1

Посмотрите на следующее. Поэтому я добавляю класс к выбранному элементу. Я

Демо https://codesandbox.io/s/bold-water-jmlch

import { Grid } from "@material-ui/core";
import "./Navigate.css";

const Navigate = () => {
  const [selectedItem, setSelectedItem] = useState("");

  const handleSelectedItem = event => {
    setSelectedItem(event.target.id);
  };

  return (
    <div className="navigate-comp">
      <Grid
        container
        direction="column"
        justify="center"
        alignItems="center"
        spacing={2}
      >
        <Grid
          item
          id="Books"
          onClick={handleSelectedItem}
          className={`nav-item ${selectedItem === "Books" ? "selected" : ""}`}
        >
          Books Management
        </Grid>
        <Grid
          item
          id="Authors"
          onClick={handleSelectedItem}
          className={`nav-item ${selectedItem === "Authors" ? "selected" : ""}`}
        >
          Authors Management
        </Grid>
        <Grid
          item
          id="Users"
          onClick={handleSelectedItem}
          className={`nav-item ${selectedItem === "Users" ? "selected" : ""}`}
        >
          Users Management
        </Grid>
      </Grid>
    </div>
  );
};

export default Navigate;