状态预检单选按钮

Question

简单问题

我有一个叫做gender的变量，它是之前设置的。

我有3个单选按钮在字段集

<fieldset id={"input_gender_radio"}>
&emsp;
<input type="radio" value="0" id="male"
onChange={changeGender} name="gender"/>
<label htmlFor="male"> Männlich</label>
&emsp;
<input type="radio" value="1" id="female"
onChange={changeGender} name="gender"/>
<label htmlFor="female"> Weiblich</label>
&emsp;
<input type="radio" value="2" id="nonbinary"
onChange={changeGender} name="gender"/>
<label htmlFor="nonbinary"> Nichtbinär</label>
</fieldset>

我有一个change-Handler

const changeGender=(e)=>{
setGenderState(e.target.value);
}

和状态常数

const [genderedit, setGenderState] = useState(gender);

在打开网页时，我如何预先检查变量gender上的这些单选按钮之一?

Answer 1

使用Javascript:

if(gender == 0){
document.queryselector("#male").checked = true;
}else if(gender == 1){
document.queryselector("#female").checked = true;
}else if(gender == 2){
document.queryselector("#nonbinary").checked = true;
}

容易:)

Answer 2

在input标签中插入checked="checked"属性

<fieldset id={"input_gender_radio"}>
&emsp;
<input type="radio" value="0" id="male"
onChange={changeGender} name="gender" checked="checked"/>
<label htmlFor="male"> Männlich</label>
&emsp;
<input type="radio" value="1" id="female"
onChange={changeGender} name="gender"/>
<label htmlFor="female"> Weiblich</label>
&emsp;
<input type="radio" value="2" id="nonbinary"
onChange={changeGender} name="gender"/>
<label htmlFor="nonbinary"> Nichtbinär</label>
</fieldset>