javascript - 如何使用 ReactJS 从单选按钮和输入框获取值？

Question

我已经制作了有 1 个问题的表格。有 4 个单选按钮选项和 1 个用于 other 单选按钮的输入框。如果选中另一个单选按钮，如何从输入框中获取值。

class ContactForm extends Component {

  setGender(event){
    console.log(event.target.value);
  }

render(){

<form>
<div id="gender" onChange={this.setGender.bind(this)}>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h4>What is your gender?</h4>  
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender"/> Female</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="gender"/> Male</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="gender"/> Prefer not to say</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="gender"/>Other</label>
                    <input type="text" class="form-inline" id="other1"/>
                  </div>
                </div>
              </div>
            </div>
</form>
}

截图:

Answer 1

您可以对组件进行一些更改。

创建了 fiddle为了它

添加了以下方法以使其正常工作。

setGender(checkedValue){
    console.log(checkedValue);
    if(checkedValue == '-1'){
     // get data from text box
    }
  }