react-受控组件与非受控组件

区分受控组件与非受控组件的标志是组件中的input等表单元素的值的来源与去向是否受到组件状态的影响，如果受到状态的影响，则称为受控组件，反之为非受控组件

狭义的受控组件：针对于表单控件而言，表单控件的value值受状态的控制，并且会影响到状态

受控组件

class Demo extends React.Component {
          state={
               inputValue:'初始值'
}

          handleChange=(e)=>{

         this.setState({
                  inputValue:e.target.value
})
}
           render(){

              return <div>
                          <input type='text'value={this.state.inputValue  onChange={this.handleChange}}/ > </div> } }

非受控组件

class Demo extends React.Component {

             render(){


                 return  <div>
                                <input type='text'/>
                            </div>




}






}

广义的受控组件：子组件没有自己的状态，其数据完全受传自于父组件的props控制

class Father extends Component{
            state={
                     name:'Jake'
                   }
              handleChange=(text)=>{
                     this.setstate({
                                 name:text
})
}
           render(){
                return <div>
                             <Child  name={this.state.name} handleChange={this.handleChange}/>

                          </div>
}
}

class Child extends Component{
               render(){
                   return <div>
                                 <input type='text'   value={this.props.name}  onChange={(e)=>{this.props.handleChange(e.target.value)}}/>
                             </div>
}
}