React - 加载页面一次调用所有 onClicks，然后单击按钮不执行任何操作

Question

我对 React 还很陌生，我对 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>

Answer 1

您在渲染时调用该函数并将该函数的结果传递给按钮的onClick.&nbsp;相反，您应该提供onClick一个匿名函数，该函数在执行时会使用适当的参数调用您想要的函数。<button&nbsp;className={`&nbsp;${isActive&nbsp;===&nbsp;"about"&nbsp;?&nbsp;'btn__nav-basr-btn&nbsp;active-link'&nbsp;:&nbsp;'btn__nav-bar-btn'}`}&nbsp;onClick={()&nbsp;=>&nbsp;buttonWasClicked("about")}>About</button>

Answer 2

onClick标签需要一个函数，而不是调用函数。如果您键入buttonWasClicked("contact")该函数，则当 DOM 准备就绪时将调用该函数。相反，你需要写{() => buttonWasClicked("contact")}