Реакция - загрузка страницы вызывает все onClicks одновременно, затем нажатие на кнопку ничего не делает - PullRequest
Новая
       6

Реакция - загрузка страницы вызывает все onClicks одновременно, затем нажатие на кнопку ничего не делает

0 голосов
/ 11 марта 2020

Я новичок в реакции, у меня хорошее понимание HTML и CSS / SASS, поэтому до сих пор у меня не возникало проблем.

Я хочу выделить кнопка на панели навигации в зависимости от того, на какой странице пользователь находится в данный момент.

Я пытался добавить простые onClick к кнопкам которая будет вызывать функцию, передавая строку, сообщающую, что « home » был только что нажат или, например, « contact ».

Я добавил alert () для функции, чтобы я мог видеть, что кнопки были нажаты и вызывается метод;

Однако, когда страница загружается, он вызывает метод каждой кнопки и выдает мне предупреждение для каждой кнопки, затем продолжает загружаться, как обычно, и, нажимая кнопки, кажется, будто я никогда не добавлял onClick.

Кто-нибудь может мне сказать, где я ошибаюсь с этой простой функцией? Последние 5 часов я потянул за волосы.

Спасибо!

NavBar. js: 

function NavBar() {

const isActive = "home";


return (    
  <nav className="landing-page__nav-bar nav-bar">
  <ul className="nav-bar__list">
    <Link to ='/home'><li><a data-page="home" className="home-link">
      <button href="landingpage" className={` ${isActive === "home" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={buttonWasClicked("home")}>Home</button>
      </a></li>
    </Link>
    <Link to ='/portfolio'><li><a data-page="portfolio" className="portfolio-link">
      <button className={` ${isActive === "portfolio" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={buttonWasClicked("portfolio")}>Portfolio</button>
      </a></li>
      </Link>
    <Link to ='/artwork'><li><a data-page="doodles" className="doodles-link">
    <button className={` ${isActive === "artwork" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={buttonWasClicked("artwork")}>Artwork</button>
      </a></li></Link>
    <Link to ='/photography'><li><a data-page="photography" className="photography-link">
      <button className={` ${isActive === "photography" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={buttonWasClicked("photography")}>Photography</button>
      </a></li></Link>
    <Link to ='/cv'><li><a data-page="cv" className="cv-link">
    <button className={` ${isActive === "cv" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={buttonWasClicked("cv")}>CV</button
      ></a></li></Link>
    <Link to ='/about'><li><a data-page="about" className="about-link">
    <button className={` ${isActive === "about" ? 'btn__nav-basr-btn active-link' : 'btn__nav-bar-btn'}`} onClick={buttonWasClicked("about")}>About</button>
      </a></li></Link>
    <Link to ='/contact'><li><a data-page="contact" className="contact-link">
    <button className={` ${isActive === "contact" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={buttonWasClicked("contact")}>Contact</button>
      </a></li></Link>       
  </ul>
</nav>

);
  }

    export default NavBar;

ButtonClick. js (метод обновить текущую страницу): 

import NavBar from './Nav-bar';

function ChangeActiveButton(selectedButton) {

    alert(selectedButton)
    NavBar.isActive = toString(selectedButton);
}

export default ChangeActiveButton;

Ответы [ 2 ]

1 голос
/ 11 марта 2020
Тег

onClick требует функции, а не вызова функции. Если вы наберете buttonWasClicked("contact"), функция будет вызвана, когда DOM будет готов.

Вместо этого вам нужно написать {() => buttonWasClicked("contact")}

1 голос
/ 11 марта 2020

Вы вызываете функцию при рендеринге и передаете результат этой функции кнопке onClick. Вместо этого вы должны дать onClick анонимную функцию, которая при выполнении вызывает нужную функцию с соответствующим параметром. 

<button className={` ${isActive === "about" ? 'btn__nav-basr-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("about")}>About</button>
...