Question

我的表单中有几个单选按钮。当我检查单选按钮时，我尝试将它们记录在控制台中，但现在我想获取单选按钮的文本并将其保存在状态变量中，但我无法将其存储在状态变量中。问题1中有4个选项，例如：＆gt; = 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)})
}

如何从ReactJS中的单选按钮获取数据？

2 个答案: