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>
}
}

 

版权声明:本文版权归作者所有,遵循 CC 4.0 BY-SA 许可协议, 转载请注明原文链接
https://www.cnblogs.com/oumannrinn/p/15890775.html