受控组件 非受控组件？

1、受控组件

/**
 * 受控组件
 * react组件中 维护一套state，通过修改state会触发ui层面更新
 * 用户通过ui组件修改本身的值，可以通知到state进行变化
 * 和vue的双向绑定有点类似
 */

class Input extends React.Component {
  state = {
    value: ''
  }

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

  render() {
    return (
      <input value={this.state.value} onChange={(e) => this.handleChange(e)}/>
    )
  }
}

2、非受控组件（file标签）

/**
 * 非受控组件
 * react组件中无需单独维护一套state去管理ui组件的值
 * 当需要ui组件值的时候再去通过别的方式获取 ref/document.querySelector
 */

class Input extends React.Component {

  handleSubmit() {
    const value = this.refs.input.value;
  }

  render() {
    return <input id="username" ref="input"/>;
  }
}