React中的受控组件和非受控组件

需要自己实现数据双向绑定

1. 数据绑定在表单标签上，必须绑定state的值，不能是普通的值
2. 然后需要实现表单的change事件，在事件中接收ev，获得表单的value值（ev.target.value）
3. 将接收到的value值设置给state上，state变了，界面就会变

export default class App extends Component{
  constructor(){
    super();
    this.state = {
      value: '123'
    }
  }
  render(){
    return (
      <div id="app">
        {/* 受控组件 */}
        <input type="text" value={this.state.value} onChange=
        {this.changeAction.bind(this)}/>
        {/* 非受控组件 */}
        <input type="text" ref="input"/>
        <button onClick={this.btnAction.bind(this)}>获取</button>
      </div>
    )
  }
  changeAction(ev){
    console.log('changeAction run......');
    this.setState({
      value: ev.target.value
    });
  }
  btnAction(){
    console.log('btnAction run ........');
    console.log(this.refs.input.value);
  }
}

区分:

1. 就形式上来说，受控组件就是为某个form表单组件添加value属性；非受控组件就是没有添加value属性的组件
2. 添加了value 属性的表单组件元素其内部是不会维护自己状态state，组件的value值一旦设置某个具体值就始终是这个值，所以需要调用者来控制组件value的改变。
3. 非受控组件在底层实现时是在其内部维护了自己的状态state；这样表现出用户输入任何值都能反应到元素上。

受控组件都是一个特点:

在react中，只有input=(text number email。。。。) textarea select(单选) 标签可以做成受控组件
input=(radio checkbox…)不能做成受控组件
radio不能实现的原因是,只是cheak做了改变,而不是value