Javascript 在react中，如何选择/选中单选按钮？

我无法单击或选择任何单选按钮。有人能帮我了解一下如何使用react中的单选按钮吗

我尝试删除

e.preventDefault（）

，但也没有效果

我的代码是这样的：

文件1:

this.state = {
    fields: {
        gender: ''
    }
}

fieldChange(field, value) {
    this.setState(update(this.state, { fields: { [field]: { $set: value } } }));
}

<Form
  fields={this.state.fields}
  onChange={this.fieldChange.bind(this)}
  onValid={() => handleSubmit(this.state.fields)}
  onInvalid={() => console.log('Error!')}
/>

render() {
    const { fields, onChange, onValid, onInvalid, $field, $validation } = this.props;
    return (
        {/* Gender */}
        <div id={styles.genderField} className={`form-group ${styles.formGroup} ${styles.projName}`}>
          <label className="col-sm-2 control-label">Gender:</label>
          <div className="col-sm-10">
            <label className="radio-inline">
              <input type="radio" name="gender" id="male" 
                    checked={fields.gender === "Male"}
                     value={fields.gender} {...$field( "gender", e => onChange("gender", e.target.value)) } />
              Male
            </label>
            <label className="radio-inline">
              <input type="radio" name="gender" id="female" 
                    checked={fields.gender === "Female"}
                     value={fields.gender} {...$field( "gender", e => onChange("gender", e.target.value)) } />
              Female
            </label>

          </div>
        </div>
        <div className={`modal-footer ${styles.modalFooter}`}>
          <button
            className={`btn btn-primary text-white ${styles.saveBtn}`}
            onClick={e => {
              e.preventDefault();
              this.props.$submit(onValid, onInvalid);
            }}
          >
            Save
          </button>
        </div>
    )
}

this.state={
字段：{
性别：''
}
}
字段更改（字段、值）{
this.setState（更新（this.state，{fields:{[field]：{$set:value}}））；
}
handleSubmit（this.state.fields）}
onInvalid={（）=>console.log（'Error！'）}
/>

文件2:

this.state = {
    fields: {
        gender: ''
    }
}

fieldChange(field, value) {
    this.setState(update(this.state, { fields: { [field]: { $set: value } } }));
}

<Form
  fields={this.state.fields}
  onChange={this.fieldChange.bind(this)}
  onValid={() => handleSubmit(this.state.fields)}
  onInvalid={() => console.log('Error!')}
/>

render() {
    const { fields, onChange, onValid, onInvalid, $field, $validation } = this.props;
    return (
        {/* Gender */}
        <div id={styles.genderField} className={`form-group ${styles.formGroup} ${styles.projName}`}>
          <label className="col-sm-2 control-label">Gender:</label>
          <div className="col-sm-10">
            <label className="radio-inline">
              <input type="radio" name="gender" id="male" 
                    checked={fields.gender === "Male"}
                     value={fields.gender} {...$field( "gender", e => onChange("gender", e.target.value)) } />
              Male
            </label>
            <label className="radio-inline">
              <input type="radio" name="gender" id="female" 
                    checked={fields.gender === "Female"}
                     value={fields.gender} {...$field( "gender", e => onChange("gender", e.target.value)) } />
              Female
            </label>

          </div>
        </div>
        <div className={`modal-footer ${styles.modalFooter}`}>
          <button
            className={`btn btn-primary text-white ${styles.saveBtn}`}
            onClick={e => {
              e.preventDefault();
              this.props.$submit(onValid, onInvalid);
            }}
          >
            Save
          </button>
        </div>
    )
}

render（）{
const{fields，onChange，onValid，onInvalid，$field，$validation}=this.props；
返回(
{/*性别*/}
性别：
onChange（“性别”，e.target.value））}/>
男性
onChange（“性别”，e.target.value））}/>
女性
{
e、 预防默认值（）；
此.props.$submit（onValid，onInvalid）；
}}
>
拯救
)
}

这不是文档处理onChange事件的方式

您需要提供完整的代码，以便能够帮助使用该特定组件

查看此工作示例：

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={selectedOption:'option1'}；
//此绑定是使`This`在回调中工作所必需的
this.handleOptionChange=this.handleOptionChange.bind（this）；
}
handleOptionChange（changeEvent）{
这是我的国家({
已选择选项：changeEvent.target.value
});
}
render（）{
返回(
选择1
选择2
选择3
);
}
}