我在組件中有一個單選按鈕組。我想根據在更新/編輯場景中從資料庫中獲取的值來設定選擇哪個收音機。
export default function updateRadioSelection(){
const [radioValue, setRadiovalue] = useState("");
useState(()=>{
setRadiovalue("pick"); // <-- Assume this value is taken from database, value may be either "delivery" or "pick"
}, [])
const changeSelection = (e)=>{
setRadiovalue(e.target.value);
}
return(
<div>
<input type="radio" id="delivery" name="orderType" value="delivery" required onChange={changeSelection} />
<label htmlFor="delivery">Delivery</label>
<input type="radio" id="pick" name="orderType" value="pick" onChange={changeSelection} />
<label htmlFor="pick">Pick Up</label>
</div>
)
}uj5u.com熱心網友回復：
要進行 acheckbox或radio檢查，您必須使用該元素的checked道具，它會接收一個值。你可以做這樣的事情inputboolean
export default function updateRadioSelection(){
const [radioValue, setRadiovalue] = useState("");
// useState will not execute any kind of callback function, for this case you need to use useEffect
useEffect(() => {
const dbResult = getRadioFromDb();
setRadiovalue(dbResult);
}, [])
const changeSelection = (e)=>{
setRadiovalue(e.target.value);
}
return(
<div>
<input type="radio" id="delivery" name="orderType" value="delivery" required onChange={changeSelection} checked={radioValue === 'delivery'} />
<label htmlFor="delivery">Delivery</label>
<input type="radio" id="pick" name="orderType" value="pick" onChange={changeSelection} checked={radioValue === 'pick'} />
<label htmlFor="pick">Pick Up</label>
</div>
)
}
您可以在其檔案中閱讀有關無線電輸入的更多資訊
uj5u.com熱心網友回復：
發布這個問題幾分鐘后，我找到了我一直在尋找的答案。事實證明這很容易。
只需添加單選按鈕和相同checked={radioValue === "pick"}的Pick Up其他單選按鈕替換"pick"為"delivery"
參考 - react.tips/radio-buttons-in-reactjs
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/513825.html
標籤：反应广播组
上一篇：FlutterListView.builder在左上角呈現專案
下一篇：隱藏材質UI資料網格過濾器中的列