我正試圖在react js中使用鉤子在點擊時改變一個按鈕的類別。問題是，當類的切換通過狀態變化發生時，可以看到類切換的結果，但頁面重新顯示，呈現的是最初的類（而不是被切換的那個）。請幫助我們
。按鈕
<button className={buttonColor1?style. priceButtonWhite:styles. priceButtonGreen} onClick={() => changeColor(1)}>100</button>
<button className={buttonColor2?style.priceButtonWhite:style. priceButtonGreen} onClick={() => changeColor(2)}>200</button>
<button className={buttonColor3?style.priceButtonWhite:style. priceButtonGreen} onClick={() => changeColor(3)}>300</button>
改變顏色功能
const changeColor = （n） => {
if （n==1）{
setButtonColor1(!buttonColor1)。
}
else if (n== 2){
setButtonColor2(!buttonColor2)。
}
else{
setButtonColor3(!buttonColor3 );
}
鉤子
const [buttonColor1, setButtonColor1] = useState(true);
const [buttonColor2, setButtonColor2] = useState(true);
const [buttonColor3, setButtonColor3] = useState(true)。
SCSS
.priceButton{
border-radius: 10px;
padding: 10px;
border: none;
}
.priceButtonWhite{
@extend .priceButton;
background: white;
border: 1px solid #166C6C;
}
.priceButtonGreen{
@extend .priceButton;
background: #166C6C;
在點擊按鈕時，該類被切換為priceButtonGreen，然后整個頁面重新顯示，按鈕上的類priceButtonWhite
。uj5u.com熱心網友回復：
我在這里創建了一個作業實體。https://codesandbox.io/s/suspicious-curie-90t4c?file=/src/App.js
由于你的例子中缺少樣式物件，所以很難看出你的代碼中有什么錯誤。
function Toggler() {
const [buttonColor1, setButtonColor1] = useState(true)。
const [buttonColor2, setButtonColor2] = useState(true);
const [buttonColor3, setButtonColor3] = useState(true);
return (
<div>
<button
className={`priceButton ${
buttonColor1 ? "priceButtonWhite" : "priceButtonGreen"
}`}
onClick={() => setButtonColor1(!buttonColor1)}。
>
100
</button>
<button
className={`priceButton ${
buttonColor2 ? "priceButtonWhite" : "priceButtonGreen"
}`}
onClick={() => setButtonColor2(!buttonColor2)}。
>
200
</button>
<button
className={`priceButton ${
buttonColor3 ? "priceButtonWhite" : "priceButtonGreen"
}`}
onClick={() => setButtonColor3(!buttonColor3)}。
>
300
</button>
</div>
);
}
.priceButton {
border-radius: 10px;
padding: 10px;
border: none;
}
.priceButtonWhite {
background: white;
border: 1px solid #166c6c;
}
.priceButtonGreen {
background: #166c6c;
在你提出的結構中，這是一個可行的解決方案。
uj5u.com熱心網友回復：
當你在form元素內有button元素時，點擊一個按鈕將導致頁面重新加載（button元素的type屬性默認設定為submit）。
你可以將按鈕的型別改為button或者在按鈕監聽器中使用event.preventDefault()
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/306993.html
標籤：