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

我制作了一个表格，其中有一个问题。有4个单选按钮选项和1个用于

其他

单选按钮的输入框。如果选中其他单选按钮，如何从输入框中获取值

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

类ContactForm扩展组件{
赛特性别（事件）{
日志（event.target.value）；
}
render（）{
你的性别是什么？
女性
男性
宁愿不说
其他
}

截图：

---

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

为它创建了一个

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

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

---

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

为它创建了一个

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

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

---

你可以试试这样的

import React, { Component } from "react";

class ContactForm extends Component {
  state = {
    gender: "",
    otherValue: ""
  };

  onChanged = event => {
    this.setState({ otherValue: event.target.value }, () => {
      console.log(this.state.otherValue);
    });
  };

  setGender = event => {
    this.setState({ gender: event.target.value }, () => {
      console.log(this.state.gender);
    });
  };

  onSubmit = () => {
    if (this.state.gender == "other") {
      let other = this.state.otherValue;
        /// do something
    }
  };

  render() {
    return (
      <form>
        <div id="gender" onChange={this.setGender}>
          <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" value="Female" /> 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" value="Male" /> 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" value="NoSay" /> 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" value="other" />Other
                </label>
                <input
                  type="text"
                  class="form-inline"
                  id="other1"
                  onChange={this.onChanged}
                />
              </div>
            </div>
          </div>
        </div>
      </form>
    );
  }
}

export default ContactForm;

import React，{Component}来自“React”；
类ContactForm扩展组件{
状态={
性别：“，
其他值：“
};
onChanged=事件=>{
this.setState（{otherValue:event.target.value}，（）=>{
console.log（this.state.otherValue）；
});
};
设置性别=事件=>{
this.setState（{gender:event.target.value}，（）=>{
console.log（this.state.gender）；
});
};
onSubmit=（）=>{
如果（this.state.gender==“其他”）{
让other=this.state.otherValue；
///做点什么
}
};
render（）{
返回(
你的性别是什么？
女性
男性
不喜欢
说
其他
);
}
}
导出默认联系人表单；

---

您可以使用onSubmit方法获取其他输入的值

import React, { Component } from "react";

class ContactForm extends Component {
  state = {
    gender: "",
    otherValue: ""
  };

  onChanged = event => {
    this.setState({ otherValue: event.target.value }, () => {
      console.log(this.state.otherValue);
    });
  };

  setGender = event => {
    this.setState({ gender: event.target.value }, () => {
      console.log(this.state.gender);
    });
  };

  onSubmit = () => {
    if (this.state.gender == "other") {
      let other = this.state.otherValue;
        /// do something
    }
  };

  render() {
    return (
      <form>
        <div id="gender" onChange={this.setGender}>
          <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" value="Female" /> 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" value="Male" /> 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" value="NoSay" /> 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" value="other" />Other
                </label>
                <input
                  type="text"
                  class="form-inline"
                  id="other1"
                  onChange={this.onChanged}
                />
              </div>
            </div>
          </div>
        </div>
      </form>
    );
  }
}

export default ContactForm;

import React，{Component}来自“React”；
类ContactForm扩展组件{
状态={
性别：“，
其他值：“
};
onChanged=事件=>{
this.setState（{otherValue:event.target.value}，（）=>{
console.log（this.state.otherValue）；
});
};
设置性别=事件=>{
this.setState（{gender:event.target.value}，（）=>{
console.log（this.state.gender）；
});
};
onSubmit=（）=>{
如果（this.state.gender==“其他”）{
让other=this.state.otherValue；
///做点什么
}
};
render（）{
返回(
你的性别是什么？
女性
男性
不喜欢
说
其他
);
}
}
导出默认联系人表单；

---

---

您可以使用onSubmit方法获取其他输入的值

您的意思是仅在单击其他时激活输入字段？@BoyWithSilverWings如果单击其他，则应返回输入内的值（仅在单击其他时）。有点？@BoyWithSilverWings如果选择了其他选项，我如何从输入框中获取值？如何也从单选按钮中获取值？@G_S看起来不错，你可以发布答案吗？你的意思是只有在单击其他选项时才激活输入字段？@BoyWithSilverWings如果单击其他选项，则它应该返回输入框中的值（只有在单击其他选项时）。有点像？@BoyWithSilverWings如果选择了其他选项，我如何从输入框中获取值，以及如何从单选按钮中获取值？@G_S看起来不错。你可以发布答案检查这是否适合你的答案。如果需要，我们可以更改它。你的答案就像一个魔咒一样。只需编辑

checkedValue='-1'

到

checkedValue=='-1'

。是的，错过了该选项。最好添加===以标识最后一个单选按钮，我将传递-1作为标识符。对于其他单选按钮，我传递其他值。选择单选按钮时，checkedValue为-1，然后我将选择“其他”，然后我将从TextBox获取数据检查更新的小提琴。但是，在获取要提交的数据时在数据库中，您可以从状态读取文本框值（如果使用状态）单击其他单选按钮，然后使用它。或者使用其他单选按钮。检查这是否适合您的答案。如果需要，我们可以更改它。您的答案就像一个符咒，只需编辑

checkedValue=='-1'

到

checkedValue==='-1'

。是的，忽略了这一点。最好添加===以识别最后一个单选按钮，我将-1作为我的标识传递对于其他单选按钮，我正在传递其他值。选择单选按钮后