Переключение изображений для активных ссылок с React.js - PullRequest
Новая
       27

Переключение изображений для активных ссылок с React.js

0 голосов
/ 13 февраля 2019

В настоящее время я пытаюсь выучить React.js для школьного проекта, и у меня возникают проблемы с переключением изображений в сочетании с активными ссылками (я искал учебник на высоком и низком уровнях безрезультатно).
Мой сайт работаетпохож на старую тему меню Kingdom Hearts 1;Navbar выглядит следующим образом.

Example Menu

Как показано на рисунке выше, домашняя страница жестко закодирована, чтобы быть «активной»«.
Мне нужна помощь, чтобы каждая ссылка отображалась в этом «активном» состоянии, когда она выбрана / активна.Когда пользователь нажимает на один из NavLinks, изображение должно измениться с серого на черный / оранжевый.Когда ссылка не выбрана (или неактивна), изображение должно перейти от черного / оранжевого обратно к серому.Активные / выбранные ссылки также должны иметь черный текст, а неактивные ссылки - серый.Пока что все, что я узнал, это как переключать единственный класс, но не множественный.В общем, я действительно не знаю, как это сделать вообще.
Как мне переключить один активный NavLink и изменить его изображение, а также изменить все другие NavLink на неактивные, а также изменить их изображения?Любая помощь приветствуется.На данный момент у меня есть следующий код для моего Navbar: 

export class NavMenu extends Component {
  static displayName = NavMenu.name;

  constructor(props) {
super(props);
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
  collapsed: true
};
  }

  toggleNavbar() {
this.setState({
  collapsed: !this.state.collapsed
});
  }

  render() {
return (
  <Navbar
    fixed="bottom"
    className="navbar-expand-sm navbar-toggleable-sm ng-white border-top mb-3"
    light
  >
    <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
    <Collapse
      className="d-sm-inline-flex flex-sm-row-reverse"
      isOpen={!this.state.collapsed}
      navbar
    >
      <ul className="navbar-nav mr-auto">
        <NavItem>
          <NavLink
            tag={Link}
            id="navHome"
            className="text-dark active"
            to="/"
          >
            <img
              src="/Images/NLUnactiveImg.png"
              alt="Unactive Link Image"
              height="45"
              width="45"
              hidden
            />
            <img
              src="/Images/NLActiveImg.png"
              alt="Active Link Image"
              height="45"
              width="45"
            />
            Home
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            tag={Link}
            d="navResume"
            className="text-dark inactive"
            to="/resume"
          >
            <img
              src="/Images/NLUnactiveImg.png"
              alt="Unactive Link Image"
              height="45"
              width="45"
            />
            <img
              src="/Images/NLActiveImg.png"
              alt="Active Link Image"
              height="45"
              width="45"
              hidden
            />
            Resume
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            tag={Link}
            d="navContact"
            className="text-dark inactive"
            to="/contact"
          >
            <img
              src="/Images/NLUnactiveImg.png"
              alt="Unactive Link Image"
              height="45"
              width="45"
            />
            <img
              src="/Images/NLActiveImg.png"
              alt="Active Link Image"
              height="45"
              width="45"
              hidden
            />
            Contact
          </NavLink>
        </NavItem>
        <NavItem>
          <NavLink
            tag={Link}
            d="navFetch"
            className="text-dark inactive"
            to="/fetch-data"
          >
            <img
              src="/Images/NLUnactiveImg.png"
              alt="Unactive Link Image"
              height="45"
              width="45"
            />
            <img
              src="/Images/NLActiveImg.png"
              alt="Active Link Image"
              height="45"
              width="45"
              hidden
            />
            Fetch data
          </NavLink>
        </NavItem>
      </ul>
    </Collapse>
    <div>
      {' '}
      <PlaySound child={this.state.child} />{' '}
    </div>
  </Navbar>
);
  }
}

1 Ответ

0 голосов
/ 13 февраля 2019

Прежде всего удалите ваши CSS (изображения) в отдельный файл CSS.Сделайте урок и вложите в него свой CSS.Примерно так: 

<NavLink tag={Link} d="navResume" className="text-dark inactive resumeImage" to="/resume">
    Resume
</NavLink>;

в вашем файле css 

.resumeImage {
    //declare your image styles here
}

Повторите выше для всех ваших ссылок.

Теперь сохраните те стили, которые вы хотите применить только кактивную ссылку в отдельном классе и примените этот класс ко всем ссылкам, как показано ниже 

<NavLink
    tag={Link}
    d="navResume"
    className="text-dark inactive resumeImage"
    activeClassName="activestyleclass"
    to="/resume"
>
    Resume
</NavLink>;
...