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. 相反，您应该提供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")}