我正在嘗試制作多個切換按鈕，每當用戶點擊任何一個按鈕，我都希望它變得更暗。
我正在嘗試制作多個切換按鈕，只要用戶點擊其中任何一個，那么我就希望它變得更暗一些。這樣，用戶就能知道他們點擊的是哪個按鈕。
下面是我寫的示例代碼。 代碼：
import React, { useState } from "react"。
import "./styles.css"。
export default function App（）{
const [active, setActive] = useState("first"/span>)。
return (
<>/span>
<div className="App">
< button className="button" active={active === "first"}。onClick={()=> {setActive("first"); }} >first</button>
< button className="button" active={active === "Second"}。onClick={()=> {setActive("Second"); }} >Second</button>
< button className="button" active={active === "Third"}。onClick={()=> {setActive("Third"); }} >Third</button>
</div>/span>
</>
);
}
現在，我如何制作一個OnClick函式來持有after Click?功能？
uj5u.com熱心網友回復：
你可以這樣做：
<button
className={`button ${active === "first" ? "activeButton" : ""}` }
onClick={() => {
setActive("first"/span>)。
}}
>
第一
</button>
<button。
className={`button ${active =="Second" ? "activeButton" : ""}`{}。
onClick={() => {
setActive("Second")。
}}
>
第二
</button>
<button
className={`button ${active == "Third" ? "activeButton" : ""}`{}。
onClick={() => {
setActive("Third")。
}}
>
第三次
</button>
然后在你的css檔案中：
.activeButton {
background-color: 紅色。
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/320734.html
標籤：
下一篇：領導為什么不聽我的匯報和授權方法