react绑定实时数据

import React,{Component} from 'react';

/**

 * 约束性和非约束性组件

 * 非约束性组：  <input type='text' defaultValue={this.state.username}/>这个defaultValue其实就是原生DoM中的value属性

 * 这样写出来的组件，其value值就是用户输入的内容，React完全不管输入的过程

 * 约束性组件：  <input type='text' value={this.state.username} onChange={this.handleUsername}/>

 * 这里，value属性不再是一个写死的值，他是this.state.username,this.state.username是由this.handleChange负责管理的

 * 这个时候实际上input的value根本不是用户输入的内容。而是onChange时间触发之后，由于this.setState导致了一次重新渲染。不过React会优化这个

 */

class Hi extends Component{

    constructor(props){

      super(props);

      //react可以在这里定义数据

 

      this.state={

          //这里面写一个对象

        username:'1111111'

          }

    }

    handleUsername=(e)=>{

        this.setState({

            username:e.target.value

        })

    }

    render(){

        return (

        <div>

           <h1>react表单</h1>

           <input type='text' value={this.state.username} onChange={this.handleUsername}/>

           {this.state.username}

           <br/>

           <input type='text' defaultValue={this.state.username}/>

        </div>

     

        )

    }

}

export default Hi;