我正在嘗試創建一個具有四個選項的組件。用戶應該只選擇一個選項。因此，如果用戶選擇另一個選項，則 previosluy 選擇的選項應更改為 false。這是我的代碼：
const riddles_ = [{
id:2,
options: ['A grandson','A daughter','A father','A nephew'],
state_: [false,false,false,false]
}]
function toggleToDo(o){
riddles_.state_ = [false,false,false,false]
riddles_.state_[o] = true
console.log(riddles_.state_)
}
return (
<div>
<input type="checkbox" id="check1" checked={riddles_.state_[0]} onClick={(o)=>toggleToDo(0)}/>
{riddles_.options[0]}
<div className='space'></div>
<input type="checkbox" id="check2" checked={riddles_.state_[1]} onClick={(o)=>toggleToDo(1)}/>
{riddles_.options[1]}
<div className='space'></div>
<input type="checkbox" id="check3" checked={riddles_.state_[2]} onClick={(o)=>toggleToDo(2)}/>
{riddles_.options[2]}
<div className='space'></div>
<input type="checkbox" id="check4" checked={riddles_.state_[3]} onClick={(o)=>toggleToDo(3)}/>
{riddles_.options[3]}
</div>
)
}
當用戶點擊一個復選框時，它只是變為真或假，并且不會對其他復選框產生任何變化。我知道 riddles_.state_ 陣列正在改變，但復選框似乎無法獲取它的值。
uj5u.com熱心網友回復：
當你使用狀態時，使用來自 useState 鉤子的 set 方法，使用反應功能組件，這是一個最佳實踐。
例子 ：
const init_state = [false,false,false,false]
const [checked_state, setCheckedState] = useState(init_state);
function toggleToDo(o){
const current_state = [false,false,false,false]
current_state[o] = true;
setCheckedState(current_state);
}
return (
<div>
<input type="checkbox" checked={checked_state[0]} onClick={(o)=>toggleToDo(0)}/>
option1
<div className='space'></div>
<input type="checkbox" checked={checked_state[1]} onClick={(o)=>toggleToDo(1)}/>
option2
<div className='space'></div>
<input type="checkbox" checked={checked_state[2]} onClick={(o)=>toggleToDo(2)}/>
option3
<div className='space'></div>
<input type="checkbox" checked={checked_state[3]} onClick={(o)=>toggleToDo(3)}/>
option4
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/405944.html
標籤：