Реагировать Js / Активный элемент в меню с состоянием

Question

Здравствуйте, я хотел бы знать, как я могу создать состояние, когда элемент из моего меню активен (когда пользователь щелкает)

код:

const MenuDashBoard = () => {
  const toggleMenu = useSelector(state => state.menuStatus.menuStatus);
  return (
      <GridMenu desktop={toggleMenu ? '240px' : '75px'} mobileGrid = {toggleMenu ? '31.25%' : '12.5%'} wdscreen = { toggleMenu? '80%' : '2%'}>
        <SidebarNav>
          <SidebarUl> 

            <SideBarLi >

              <SideBarA>
                <Icon name='home' size='large' style={{ marginRight: '10px', padding: 0, opacity:'1', height:' 1em'}} /> 
                <p style={{display: toggleMenu ? 'block' : 'none'}} >Home</p>
              </SideBarA>

            </SideBarLi>

            <SideBarLi >

              <SideBarA>
                <Icon name='home' size='large' style={{ marginRight: '10px', padding: 0, opacity:'1', height:' 1em'}} /> 
                <p style={{display: toggleMenu ? 'block' : 'none'}}>Home2</p>
              </SideBarA>

            </SideBarLi>

          </SidebarUl>
        </SidebarNav>
      </GridMenu>
  );
}

В основном я хотел создать что-то с состоянием, чтобы сохранить активный элемент, чтобы включить некоторые css

Answer 1

Вы можете использовать хуки с useState и, в зависимости от состояния, задающего стиль, вот пример из приложения чата, в зависимости от того, какой пользователь в сети, он изменит css с зеленого или черного

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);

  ...

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

Answer 2

Дайте имя каждому из них и напишите для них onClick, так как ваш код неполон, мне трудно это сделать. Вот тот код типа, который вы хотите:

Код:

state={
        username:'',//it tracks which element is being pressed
        user:['maifeeulasad','maifee']    
    }

    constructor(props){
        super(props);
        this.userList=this.userList.bind(this);
        this.setUsername=this.setUsername.bind(this);
    }

    setUsername = (e) =>{
        this.setState({username:e.target.getAttribute('name')})
    }

    userList = () =>{
        return this.state.user.map((u)=>{ 
            console.log(u);
            return <li onClick={this.setUsername} id={u} name={u}>{u}</li>; 
        }); 
    }

    render() {
    if(this.state.username==='' )
    {
        return (
            <div>
                Developer list:
                {this.userList()}
            </div>
        );

    }
    else
    {
        return (
            <div>
                Developer list:
                {this.userList()}
                <a href={"https://github.com/"+this.state.username}>View My GitHub Profile</a>
            </div>
            );
    }
}

песочница

В этом коде:

setUsername = e => {
    this.setState({ username: e.target.getAttribute("name") });
  };

Чтобы достичь этого, давайте определим css первый 'colo'

Теперь в нашем коде просто добавьте className={this.state.username === u ? "colo" : ""} в return <li onClick={this.setUsername} id={u} name={u}>{u}</li>;, и он сделает вашу работу. Проверьте обновленную песочницу, она должна работать.

Если работает, не забудьте поставить галочку и принять в качестве ответа.