編碼新手，我正在嘗試制作它，因此您單擊一個按鈕，它會更改該按鈕的顏色，然后當您單擊它旁邊的按鈕時，該按鈕會更改顏色，并且上一個按鈕會回傳到它的顏色原色。我嘗試了很多很多不同的東西，但這就是我現在所擁有的。
const [buttonOneOn, setButtonOneOn] = useState(false)
const [buttonTwoOn, setButtonTwoOn] = useState(false)
function onChangeForFilter(e) {
setButtonOneOn(prevButtonOn=>!prevButtonOn)
if(buttonOneOn===true){
e.target.style.color = "grey"
}
else{e.target.style.color='blue'}
if(buttonTwoOn===true){
setButtonOneOn(false)
}
}
function onChangeForFilter2(e) {
setButtonTwoOn(prevButtonOn=>!prevButtonOn)
if(buttonTwoOn===true){
e.target.style.color='grey'
}
else{e.target.style.color='blue'}
if(buttonOneOn===true){
setButtonOneOn(false)
}
}
顯然，這段代碼根本沒有做我想做的事。在網上找不到任何答案。如果有人有任何資源，將不勝感激。
uj5u.com熱心網友回復：
你真的可以純粹在css中實作這一點。這里有一些你可以玩的樣本。讓我知道這是否是您的意思。
button {
background-color: white;
border-radius: 10px;
color: black;
}
button:focus {
background-color: red;
border-radius: 10px;
color: white;
}<div>
<button>My button 1</button>
<button>My button 2</button>
<button>My button 3</button>
</div>uj5u.com熱心網友回復：
我的方法使用狀態和模板文字來玩 className
import './css.css'
export default function Buttonsso() {
const [buttonOne, setButtonOne] = useState(false);
const [buttonTwo, setButtonTwo] = useState(false);
function eForBtn1() {
setButtonOne(buttonOne=>!buttonOne);
}
function eForBtn2() {
if(buttonOne === true & buttonTwo=== false) {
setButtonOne(false);
setButtonTwo(true);
}
}
return (
<div>
<button className={`${buttonOne ? "purple" : ""}`} onClick={() => eForBtn1()}>btn1</button>
<button className={`${buttonTwo ? "orange" : ""}`} onClick={() => eForBtn2()}>btn2</button>
</div>
)
}
css.css 檔案看起來像
.purple {
background-color: purple;
}
.orange {
background-color: orange;
}
我沒有您的渲染功能，因此無法處理您的代碼。但我的解決方案肯定有效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/483292.html
標籤：javascript 反应