我正在嘗試使用 React 制作一個測驗應用程式。
我目前正在主測驗頁面上作業，其中有 4 個按鈕，每個按鈕都表示我從問題庫中匯入的答案。
我希望突出顯示當前選定的按鈕，為此我目前正在為每個按鈕使用一個狀態。有沒有辦法只使用一種狀態，處理所有四個按鈕，因為這種方式太繁瑣，不能用于大量這樣的按鈕？另外，我只想突出顯示一個按鈕，即用戶最終選擇的那個按鈕。因此，出于這個原因，我需要將所有其他按鈕的狀態設定為null，這使得任務更加乏味。
這是包含按鈕的 div
<div>
<button className={selected1} onClick={() => dealingWithOptions("A")}>{questions[currentQuestion].optionA}</button>
<button className={selected2} onClick={() => dealingWithOptions("B")}>{questions[currentQuestion].optionB}</button>
<button className={selected3} onClick={() => dealingWithOptions("C")}>{questions[currentQuestion].optionC}</button>
<button className={selected4} onClick={() => dealingWithOptions("D")}>{questions[currentQuestion].optionD}</button>
</div>
這是處理單擊選項的功能
const [selected1,setSelectedButton1] = useState("")
const [selected2,setSelectedButton2] = useState("")
const dealingWithOptions = (op) => {
setOptionChosen(op);
if (op=="A") {
setSelectedButton1("selected1");
setSelectedButton2("")
setSelectedButton3("")
setSelectedButton4("")
} else if (op=='B') {
setSelectedButton1("");
setSelectedButton2("selected2")
setSelectedButton3("")
setSelectedButton4("")
} else if (op=='C') {
setSelectedButton1("");
setSelectedButton2("")
setSelectedButton3("selected3")
setSelectedButton4("");
}
else if (op=='D') {
setSelectedButton1("");
setSelectedButton2("")
setSelectedButton3("")
setSelectedButton4("selected3");
}
}
uj5u.com熱心網友回復：
我建議有一個狀態，它存盤選擇的選項（所以 A、B、C 或 D），然后在您的 JSX 部分中，您有一個條件，將類名“選擇”分配給相應的按鈕。
如果選擇發生變化，狀態也會發生變化，這會觸發重新渲染（因此您甚至不必洗掉“選定”類，因為它只會在重新渲染時被分配給（并且僅）正確的
uj5u.com熱心網友回復：
它可以通過多種方式解決和優化。我正在嘗試提供最適合您當前代碼的內容。
我假設您有一個存盤選擇選項的狀態。
現在像這樣更新所有按鈕
<button className={choosen == "A" ? "selected" : "" } onClick={() => dealingWithOptions("A")}>{questions[currentQuestion].optionA}</button>
這choosen是存盤所選選項的狀態。
說明：這里我們正在做的是，我們為每個按鈕匹配，如果它是選定的按鈕，則添加選定的類，否則不添加任何內容。
uj5u.com熱心網友回復：
我建議您設定一個狀態來維護選定的按鈕。
setSelectedButton('A')
如果沒有選擇，則為 undefined
然后，
<button className={selectedButton === 'A' ? 'selected1' : ''}>...
這就是說對于條件類，我會使用類似的東西clsx而不是手動構建類字串
例如
<button className={clsx({selected1: selectedButton === 'A'})}>...
uj5u.com熱心網友回復：
有幾種方法可以實作這一點。您可以設定一種狀態：const [selectedId, setSelectedId] = useState("")
定義函式：const selectHandler = (e) => setSelectedId(e.target.name)
在您的按鈕上呼叫函式并將狀態設定為 Id：<button className={selectedId === "a" && "selected"} name="a" onClick={() => setSelectedId("a")}>Button A</button>對于其余按鈕，更改名稱以及傳遞給函式的引數。也是className比較中的字串
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/522647.html