我只想在單選按鈕組中選擇一個選項。我只能在網上找到類組件代碼。還可以幫助我使用 onChange 函式來處理此問題。
const [radioOption, setradioOption]= useState(true)
const handleRadioChange = () =>{
}
return(
<>
<Form.Group
inline
style={{
display:'flex',
justifyContent:'space-between'}}
>
<Form.Radio
onChange={handleRadioChange}
value="All devices"
label='All devices'
defaultChecked/>
<Form.Radio
onChange={handleRadioChange}
value='Mobile only'
label='Mobile only'/>
<Form.Radio
onChange={handleRadioChange}
value='Desktop only'
label='Desktop only'/>
</Form.Group>
</>)
uj5u.com熱心網友回復：
要選擇只one option在group of radio buttons你需要使用same name的每一個input of radio。為了保存您的選擇，我們可以使用useState. 這是完整的示例：
import React, { useState } from "react";
function Demo() {
const [gender, setGender] = useState("Male");
function onChangeValue(event) {
setGender(event.target.value);
console.log(event.target.value);
}
return (
<div onChange={onChangeValue}>
<input type="radio" value="Male" name="gender" checked={gender === "Male"} /> Male
<input type="radio" value="Female" name="gender" checked={gender === "Female"}/> Female
<input type="radio" value="Other" name="gender" checked={gender === "Other"} /> Other
</div>
);
}
export default Demo;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/359812.html
標籤：javascript 反应