如何從ReactJS中的單選按鈕獲取數據？

Question

我的表單中沒有幾個單選按鈕。 當我檢查單選按鈕時，我嘗試將它們記錄在控制台中，但是現在我想獲取單選按鈕的文本並將其保存在狀態變量中，但無法將其存儲在狀態變量中。 問題1中有4種格式，例如：> = 25歲，26-35歲，等等，我想將這些年齡存儲在狀態變量中。

contactform.js：

    import React, { Component } from 'react';

    class ContactForm extends Component {
      constructor(props){
        super(props);
        this.state = {
            age:'',
            gender:'',
            health:'',
            name:'',
            email:'',
            info:'',
            fitness:''
        };
      }

    setAge(checkedValue){
    console.log(checkedValue);
    if(checkedValue === '-1'){
    console.log(this.state.age)
    }
  }

    render() {

        return (
          <div>

            <div id="center">
              <form>

                  <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                      <h3>[Test]Contact us Survey Form</h3>  
                    </div>
                  </div>

                <div id="agegroup" >
                  <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                      <h4>What is your age group?</h4>  
                    </div>
                  </div>

                  <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                      <div className="radio">
                        <label><input type="radio" name="age" onChange={this.setAge.bind(this,'>=25 yrs')}/> >=25 yrs</label>
                      </div>
                    </div>
                  </div>
                  <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                      <div className="radio">
                        <label><input type="radio" name="age"  onChange={this.setAge.bind(this,'26-35 yrs')}/> 26-35 yrs</label>
                      </div>
                    </div>
                  </div>
                  <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                      <div className="radio">
                        <label><input type="radio" name="age" onChange={this.setAge.bind(this,'36-50 yrs')}/> 36-50 yrs</label>
                      </div>
                    </div>
                  </div>
                  <div className="form-group">
                    <div className="col-sm-offset-2 col-sm-10">
                      <div className="radio">
                        <label><input type="radio" name="age" onChange={this.setAge.bind(this,'>50 yrs')}/> >50 yrs</label>
                      </div>
                    </div>
                  </div>
                </div>
    </form>

     </div>

          </div>
        );
      }
    }

    export default ContactForm;

我的表單的屏幕截圖：

Answer 1

constructor() {
  super();
  this.setAge = this._setAge.bind(this);
}

_setAge(age) {
  return function(e) {
    this.setState({
      age,
    }, () => {
      console.log(this.state.age);
    });
  }
}

render() {
  return (
    <input type="radio" onChange={this.setAge('36-50')} />
  )
}

Answer 2

狀態不會自動更新，您必須在onChange方法中使用setState。

像這樣：

setAge(checkedValue){
    console.log(checkedValue);
    this.setState({
        age: checkedValue
    }, () => {console.log('updated age = ', this.state.age)})
}