本文主要是介绍在react中说说对受控组件和非受控组件的理解?以及应用场景,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
在react中说说对受控组件和非受控组件的理解?以及应用场景
- 回答思路:说说受控组件-->说说非受控组件-->应用场景
- 受控组件:
- 非受控组件
- 应用场景
回答思路:说说受控组件–>说说非受控组件–>应用场景
受控组件:
简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据
举例:
class TestComponent extends React.Component{constructor(props){super(props);this.state = {username:'Tom'};}render(){return <input name="username" value={this.state.username}></input> }
}
这时候当我们在输入框输入内容时,会发现输入的内容无法显示出来,此时input标签是一个可读的状态,因为value被this.state.username所控制,当用户输入时,this.state.username不会自动更新,这样的话input的内容就不会发生变化了,想要解除被控制,可以为input标签设置onChange事件,触发的时候更新state,从而导致input框内容更新
非受控组件
简单来讲,就是不受我们控制的组件,一般情况是在初始化的时候接受外部数据,然后自己在内部存储自身状态,当需要时,可以使用ref查询DOM并查找当前值,如下:
import React,{Component} form 'react';
export class ExampleComp extedns Component{constructor (props){super(props);this.inputRef = React.createRef();}handleSubmit = (e) =>{console.log("获取input框的值为:",this.inputRef.current.value);e.preventDefault();}render(){return (<form onSubmit={e => this.handleSubmit(e)}><input defaultValue="Tom" ref={this.inputRef} /><input type="submit" value="提交" /></form>)}
}
应用场景
大多数推荐使用受控组件来实现表单,因为受控组件表单数据由React组件负责处理,非受控组件控制能力弱,表单数据由DOM本身处理,但更加方便快捷,代码量少
特征 | 不受控组件 | 受控组件 |
---|---|---|
一次性取值,如提交时 | √ | √ |
提交时验证 | √ | √ |
即时现场验证 | × | √ |
有条件地禁用提交按钮 | × | √ |
强制输入格式 | × | √ |
一个数据的多个输入 | × | √ |
动态输入 | × | √ |
这篇关于在react中说说对受控组件和非受控组件的理解?以及应用场景的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!