在react中说说对受控组件和非受控组件的理解?以及应用场景

在react中说说对受控组件和非受控组件的理解?以及应用场景

回答思路:说说受控组件-->说说非受控组件-->应用场景

受控组件:

简单来讲,就是受我们控制的组件,组件的状态全程响应外部数据

举例:

javascript 复制代码
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并查找当前值,如下:

javascript 复制代码
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本身处理,但更加方便快捷,代码量少

特征 不受控组件 受控组件
一次性取值,如提交时
提交时验证
即时现场验证 ×
有条件地禁用提交按钮 ×
强制输入格式 ×
一个数据的多个输入 ×
动态输入 ×
相关推荐
β添砖java11 分钟前
vivo响应式官网
前端·css·html·1024程序员节
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
Baklib梅梅7 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_7 小时前
Chrome开发者工具
前端·chrome
YiHanXii7 小时前
this 输出题
前端·javascript·1024程序员节
楊无好7 小时前
React中ref
前端·react.js
维他命Coco7 小时前
js常见开发学习
javascript
程琬清君7 小时前
vue3 confirm倒计时
前端·1024程序员节