React - 加载页面一次调用所有 onClicks，然后单击按钮什么也不做

Question

我对反应很陌生，我对 HTML 和 CSS/SASS 有很好的理解，所以直到现在我还没有遇到任何问题。

我想根据用户当时所在的页面突出显示导航栏上的按钮。

我尝试向将调用函数的按钮添加一个简单的onClick ，例如传入一个字符串告诉它“ home ”刚刚被点击或“ contact ”。

我在函数中添加了一个 alert() 以便我可以看到按钮被按下并且方法正在被调用；

但是，当页面加载时，它调用每个按钮方法并为每个按钮发出警报，然后继续像往常一样加载并且单击按钮似乎我从未添加过 onClick 放在首位。

谁能告诉我这个简单的功能哪里出了问题？ 在过去的 5 个小时里，我一直在拔头发。

谢谢！

导航栏.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;

Answer 1

您在渲染时调用该函数并将该函数的结果传递给按​​钮的onClick 。 相反，您应该为onClick一个匿名函数，该函数在执行时使用适当的参数调用您想要的函数。

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

Answer 2

onClick标签需要一个函数，而不是调用一个函数。 如果你输入buttonWasClicked("contact")函数会在 DOM 准备好时被调用。

相反，您需要编写{() => buttonWasClicked("contact")}