我對(duì) React 還很陌生，我對(duì) HTML 和 CSS/SASS 有很好的理解，所以到目前為止我還沒(méi)有遇到任何問(wèn)題。我想根據(jù)用戶當(dāng)時(shí)所在的頁(yè)面突出顯示導(dǎo)航欄上的一個(gè)按鈕。我嘗試向?qū)⒄{(diào)用函數(shù)的按鈕添加一個(gè)簡(jiǎn)單的onClick，傳遞一個(gè)字符串告訴它剛剛單擊了“ home ”或“ contact ”。我在函數(shù)中添加了一個(gè)alert()，這樣我就可以看到按鈕被按下并且方法被調(diào)用；但是，當(dāng)頁(yè)面加載時(shí)，它會(huì)調(diào)用每個(gè)按鈕方法并為每個(gè)按鈕發(fā)出警報(bào)，然后繼續(xù)照常加載，單擊按鈕似乎就好像我從未添加過(guò) onClick 一樣。誰(shuí)能告訴我這個(gè)簡(jiǎn)單的功能哪里出了問(wèn)題？過(guò)去5個(gè)小時(shí)我一直在拔頭發(fā)。謝謝你！導(dǎo)航欄.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>
2 回答
浮云間
TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超4個(gè)贊
您在渲染時(shí)調(diào)用該函數(shù)并將該函數(shù)的結(jié)果傳遞給按鈕的onClick. 相反，您應(yīng)該提供onClick一個(gè)匿名函數(shù)，該函數(shù)在執(zhí)行時(shí)會(huì)使用適當(dāng)?shù)膮?shù)調(diào)用您想要的函數(shù)。
<button className={` ${isActive === "about" ? 'btn__nav-basr-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("about")}>About</button>
幕布斯7119047
TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超8個(gè)贊
onClick標(biāo)簽需要一個(gè)函數(shù)，而不是調(diào)用函數(shù)。如果您鍵入buttonWasClicked("contact")該函數(shù)，則當(dāng) DOM 準(zhǔn)備就緒時(shí)將調(diào)用該函數(shù)。
相反，你需要寫{() => buttonWasClicked("contact")}
- 2 回答
- 0 關(guān)注
- 180 瀏覽
添加回答
舉報(bào)
0/150
提交
取消