受控组件

其值由state控制的输入表单元素称为“受控组件”。

1. 普通文本框

class App extends React.Component {
  constructor () {
    super();
    this.state = {
      myValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (e) {
    this.setState({
      myValue: e.target.value
    })
  } 
  
  render () {
    return (
      <div>
        <input type="text" value={this.state.myValue} onChange={this.handleChange} />
      </div>
    )
  }
}

2. 下拉选择框

class App extends React.Component {
  constructor () {
    super();
    this.state = {
      myValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (e) {
    this.setState({
      myValue: e.target.value
    })
  } 
  
  render () {
    return (
      <div>
        <select value={this.state.myValue} onChange={this.handleChange}>
          <option value="grapefruit">Grapefruit</option>
          <option value="lime">Lime</option>
          <option value="coconut">Coconut</option>
          <option value="mango">Mango</option>
        </select>
      </div>
    )
  }
}

PS: 默认选中项，不能通过 selected 选项控制！！！

3. 单选框

class App extends React.Component {
  constructor () {
    super();
    this.state = {
      myValue: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (e) {
    this.setState({
      myValue: e.target.value
    })
  } 
  
  render () {
    return (
      <div>
        <input type="radio" name="sex" value="0" checked={this.state.myValue === '0'} onChange={this.handleChange} />

        <input type="radio" name="sex" value="1" checked={this.state.myValue === '1'} onChange={this.handleChange} />
      </div>
    )
  }
}

4. 多选框

class App extends React.Component {
  constructor () {
    super();
    this.state = {
      myValue: false
    }
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (e) {
    this.setState({
      myValue: !this.state.myValue
    })
  } 
  
  render () {
    return (
      <div>
        <input type="checkbox" checked={this.state.myValue} onChange={this.handleChange} />
      </div>
    )
  }
}

非受控组件

其值由真实DOM控制的输入表单元素称为“非受控组件”。

class App extends React.Component {
  getValue () {
    console.log(this.refs.myInput.value)
  }

  render () {
    return (
      <div>
        <input type="text" ref="myInput" />
        <button onClick={this.getValue.bind(this)}>获取表单输入值</button>
      </div>
    )
  }
}

以上代码实现的就是一个非受控的普通文本框。
通过 ref 属性添加标识
通过 this.refs.xxx 获取真实DOM对象

PS:

1. 非受控组件中，不能通过 value 来设置默认值。
2. 针对 <input type="text" /> 、<select> 、<textarea> ，使用 defaultValue 属性。
3. 针对 <input type="checkbox" /> 、<input type="radio" />，使用 defaultChecked 属性。