如何在 ReactJS 中使用两个不同的状态变量获取数据？

Question

我制作了 4 个单选按钮和一个选项输入框：其他单选按钮（见截图）。当我选中其他单选按钮并在输入框中输入值时，this.state.gender 变为 -1 和 this.state.gendertext 等于输入框中输入的文本。所以我想做this.state.gender = this.state.gendertext当且仅当其他单选按钮被选中，否则this.state.gender等于单选按钮选项值和this.state.gendertext = ''

注意：-1 用作最后一个单选按钮选项的标识符。

contactform.js：

import React, { Component } from 'react';

class ContactForm extends Component {
  constructor(props){
    super(props);
    this.state = {
        gender:'',
      gendertext:''

    };
  }

setGender(checkedValue){
    console.log(checkedValue);
    this.setState({
        gender:checkedValue
    })
  }

  onChangeTextBoxGender(event){
  this.setState({gendertext: event.target.value})
  }

savedata(age, gender, health, name, email, info, fitness){
        let newcontent = contentref.push();

      if(this.state.gender === -1){
        this.setState({
          gender:this.state.gendertext
        })
      }

        newcontent.set({

            gender:this.state.gender,
        gendertext:this.state.gendertext

        });
  }
 render() {

    return (
      <div>

        <div id="center">
          <form>
<div id="gender">
              <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" checked={(this.state.gender === 'Female')} onChange={this.setGender.bind(this,'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" checked={(this.state.gender === 'Male')} onChange={this.setGender.bind(this,'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" checked={(this.state.gender === 'Prefer not to say')} onChange={this.setGender.bind(this,'Prefer not to say')}/> 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" checked={(this.state.gender === -1)} onChange={this.setGender.bind(this,-1)}/>Other</label>
                    <input type="text" class="form-inline" id="other1" value={this.state.gendertext} onChange={this.onChangeTextBoxGender.bind(this)}/>
                  </div>
                </div>
              </div>
            </div>
 </form>
        </div>

      </div>
    );
  }
}

export default ContactForm;

截图： here

Answer 1

  onChangeTextBoxGender(event){
    const txt=event.target.value;
    this.setState({
      gendertext: txt,
        gender: txt
    })
  }

还有，

  setGender(checkedValue){
    console.log(checkedValue);
    this.setState({
      gender:checkedValue,
      gendertext:''
    })
  }

并更改以下行：

<label><input type="radio" name="gender" checked={(this.state.gender === -1 || this.state.gendertext.length >0)} onChange={this.setGender.bind(this,-1)}/>Other</label>