作为反应，如何选择/检查单选按钮？

Question

我无法单击或选择我的任何单选按钮。有人可以帮我看看如何在反应中使用单选按钮吗？

我尝试删除 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!')}
/>

文件 2：

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>
    )
}

Answer 1

这不是文档处理 onChange 事件的方式。 https://reactjs.org/docs/handling-events.html

您需要提供完整的代码才能帮助该特定组件。

查看这个工作示例：https://stackblitz.com/edit/react-radiobtns

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {selectedOption: 'option1'};

    // This binding is necessary to make `this` work in the callback
    this.handleOptionChange = this.handleOptionChange.bind(this);
  }

  handleOptionChange(changeEvent) {
    this.setState({
      selectedOption: changeEvent.target.value
    });
  }

  render() {


    return (
      <form>
          <label>
            <input 
            onChange={this.handleOptionChange} 
            type="radio" value="option1" 
            checked={this.state.selectedOption === 'option1'}  
            name="radio1"/>
            Option 1
          </label>
          <label>
            <input 
            onChange={this.handleOptionChange} 
            checked={this.state.selectedOption === 'option2'} 
            type="radio" 
            value="option2" 
            name="radio1"/>
            Option 2
          </label>
          <label>
            <input 
            onChange={this.handleOptionChange} 
            checked={this.state.selectedOption === 'option3'}  
            type="radio" 
            value="option3" 
            name="radio1"/>
            Option 3
          </label>
      </form>
    );
  }
}