React: 非受控组件和受控组件的概念

当一个表单元素的值发生变化时，会通过onChange函数更新到组件的state中，则为受控组件
一个表单元素没有value属性（单选按钮和复选框是checked属性），则为非受控组件

受控组件实例

class MyRadio extends React.Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.state = {
      radioValue: '',

    }
  }
  handleChange(e){
    this.setState({
      radioValue: e.target.value
    })
  }

  handleSubmit(event){
    const {radioValue} = this.state;
    alert(radioValue);
    event.preventDefault();
    
  }

  render() {
    const {radioValue} = this.state;
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
        <p>gender:</p>
        <label>male
          <input type="radio" value="male" onChange={this.handleChange} checked={radioValue==='male'}/>
        </label>

        <label>female
          <input type="radio" value="female" onChange={this.handleChange} checked={radioValue==='female'}/>
        </label>

        <br></br>

        <input type="submit" value="提交表单"/>

        </form>

      </div>
    )
  }
}

非受控组件实例：

class MyRadio2 extends React.Component {
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleSubmit(event){
    const checkedFlag = this.refs.male.checked === true ? 'male':'female';
    alert(checkedFlag);
    event.preventDefault();
    
  }

  handleChange(e){
   const val = e.target.value;
   if(val==="male"){
    this.refs.female.checked=false;
   }
   else{
    this.refs.male.checked=false;
   }

    
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
        <p>gender:</p>
        <label>male
          <input type="radio" value="male" ref="male" onChange={this.handleChange}/>
        </label>

        <label>female
          <input type="radio" value="female" ref="female" onChange={this.handleChange}/>
        </label>

        <br></br>

        <input type="submit" value="提交表单"/>

        </form>

      </div>
    )
  }
}