react 表单（受控组件和非受控组件）
我们知道表单元素与其他的普通DOM元素来说是不一样的，它们保存了自己的一些状态。
我们主要说的就是表单元素中的受控组件和非受控组件。
受控组件就是这个组件的状态是我们（react）控制的，这个组件的行为是完全受到我们控制的，所以叫做受控组件，比如：
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
handleSubmit(event) {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
这个表单中的input的value是受到组件的state来控制的，并且元素的onChange也是受到组件的控制函数控制的，并且最终表单的提交也是收到组件的提交处理函数控制的。也就是说，组件任何状态的改变，都是收到一个相关的处理函数控制的。那么我们想想这种受控组件有什么优点和缺点，我们稍微想一下就是受控组件的话，优点就是一切都是可以控制的，缺点很明显，就是写起来比较麻烦，不过这也不算是缺点吧，毕竟要功能强大，肯定就需要自己定制呀。
非受控组件
在大多数情况下，我们推荐使用 受控组件 来实现表单。 在受控组件中，表单数据由 React 组件处理。如果让表单数据由 DOM 处理时，替代方案为使用非受控组件。
这句话大概说明了什么是非受控组件。我们看一个例子：
class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
alert('A name was submitted: ' + this.input.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
我们可以跟上面的受控组件做一个下比较，首先直观上看，我们的代码量少了一点，那么具体哪里少了呢，就是我们不需要对input的onChange事件进行函数处理，我们也没有保存input的value的state，所以这个组件的状态是由它自己保存的，我们可以在需要的时候通过ref获取到，比如在submit的时候。有时候我们需要给组件加上默认值，受控组件很容易做到，就是给state初始化的时候给一个默认值，但是非受控组件怎么弄呢？这里有一个属性叫做defaultValue我们给input传入这个属性就可以修改它的初始值了。（checkbox 和 radio 是defaultChecked）
那么我们到底该如何选择使用受控组件还是非受控组件呢？
我也不是特别明确，看了一些别人写的文章，我的理解是：当我们需要实时的控制组件的状态（包括样式，值等），我们就应该使用受控组件，如果我们只是需要在提交的时候获取一下值什么的，我们可以选择使用非受控组件。
还有一个特殊的东西，就是<input type='file'>，这种组件只能是非受控组件，因为它的value属性是只读的，只能够受用户控制，我们没法主动去控制。
react 表单（受控组件和非受控组件）的更多相关文章
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- 浅谈react受控组件与非受控组件
引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...
- React受控组件和非受控组件
受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...
- react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)
第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...
- React：受控组件与非受控组件混用实战 - 译文
原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...
- 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容
一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...
- react中 受控组件和 非受控组件 浅析
一 受控组件 顾名思义,受控 也就是能够被控制,简而言之也就是 该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入. 二 非受控组件 顾名思义,非受控,也就是内部的视图变化,st ...
- react 表单获取多个input
react 表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...
- Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
随机推荐
- 【CSS3】使用CSS3制作全屏切换效果
在线演示: DEMO DEMO中及以下代码并没有写兼容代码,请使用高级浏览器打开,IE版本对CSS3支持并不太友好,IE11打开没有滚屏效果. 兼容代码前缀: -webkit- -moz- -o- - ...
- H3C 帧中继地址映射
- PPP验证对比
- 【知识小结】Git 个人学习笔记及心得
https://mp.weixin.qq.com/s/D96dXYfu3XAA4ac456qo0g git架构 工作区:就是你在电脑里能看到的目录. 版本库:工作区有一个隐藏目录.git,,而是Git ...
- UVA 11400"Lighting System Design"
传送门 错误思路 正解 AC代码 参考资料: [1]:https://www.cnblogs.com/Kiraa/p/5510757.html 题意: 现给你一套照明系统,这套照明系统共包含 n 种类 ...
- Java中getBytes()方法--使用详解
getBytes()方法详解 在Java中,String的getBytes()方法是得到一个操作系统默认的编码格式的字节数组.这表示在不同的操作系统下,返回的东西不一样! 1. str.getByte ...
- Java语言中使用OpenMP
从去年年中,开始学习Java,主要是维护公司用Java编写的服务器软件.目前,该服务器软件遇到一个问题,在下载大文件时,如果同时下载的用户很多, 服务器软件工作会出现异常,有的用户无法下载.服务器硬件 ...
- vue-learning：16 - js - computed
computed 在指令章节讲过,插值{{ }}和指令都接受变量和表达式的写法,使用表达式可以进行简单的二元或三元运算.但如果要执行更加复杂的计算或频繁重复的计算,如果还是直接写在指令的表达式中会让代 ...
- BZOJ3527 推出卷积公式FFT求值
BZOJ3527 推出卷积公式FFT求值 传送门:https://www.lydsy.com/JudgeOnline/problem.php?id=3527 题意: \(F_{j}=\sum_{i&l ...
- Cortex-A9 Timing
在Cortex-A9的文档<Cortex-A9 NEON Media Processing Engine>Technical Reference Manual中有关于Instruction ...