React初识整理(三)--受控组件解决方法
1. 受控组件:组件处于受控制状态,不可更改输入框内的值。
2. 什么情况下会让组件变成受控组件?
- 文本框设置了value属性的时候
- 单选框或多选框设置了checked属性的时候。
3. 如何解决?
- 使用state设置值
- 绑定onChange事件 - 在事件处理方法中获取组件的值并更改state。
4. input框受控解决举例:
当父级传入1个值放到子组件的input框内时,如果采用props的方法接收,并用value属性渲染到input框里,
如:
此时我们会发现,input框的内容 “name”就不能修改、删除了。
并且浏览器给出警告,大致意思是用prop得到的value值渲染的表单元素,是一个只读的区域,不能做修改。
此时我们就要通过设置state与onChange事件并用的方式来解决受控组件的问题。
①首先,从父组件传值的方式我们不变。
②然后,从子组件接收这个值就要用props的值来设置到state上了。
- 在子组件的constructor里初始化1个state的value值为空字符串(其实在这里也能获取到props的值,但是constructor只运行组件创建的第1次时运行,后续不运行,所以得不到我们后续传过来的value值)
- 初始化后,在props改变时候触发的componentWillReceiveProps(newProps)事件里设置state里的value值,其值为props传过来的value。
- 在input框value属性接收state里的value值,同时绑定onChange事件,即输入框的值改变的时候就触发设置state状态的值。
其中onChange事件的函数需用箭头函数,防止this值的改变。 - 完成上述设置后,就会发现input框的值可以改变啦,而且浏览器的警告也没有了。
以上是input框的设置方法,select框的设置方法类似,在此不做赘述,示例代码如下:
React初识整理(三)--受控组件解决方法的更多相关文章
- React初识整理(五)--Redux和Flux(解决状态传递问题)
Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...
- react系列(三)组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
- React初识整理(四)--React Router(路由)
官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...
- SqlServer 由于未在SqlServer的此实例上安装复制组件解决方法
sqlserver2005在复制订阅时出现: “由于未在SqlServer的此实例上安装复制组件,Microsoft SQL server 无法访问这些组件,请参阅SQL Server……” 解决方法 ...
- react中直接调用子组件的方法(非props方式)
我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...
- react 表单(受控组件和非受控组件)
我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...
- react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)
第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...
- React初识整理(二)--生命周期的方法
React生命周期主要有7中: 1. componentWillMount() :组件将要挂载时触发 ,只调用1次 2. componentDidMount() :组件挂载完成时触发,只调用1次 3. ...
- React初识整理(一)
一.React的特点 1.自动化的UI状态管理:自动完成数据变化与界面效果的更新. 2.虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然 ...
随机推荐
- centos 7.3 安装vmtools,解决无法编译共享文件夹模块
环境说明: vmware 12.5.0 build-4352439 centos 7.3.1611 64位,内核版本:Linux version 3.10.0-514.16.1.el7.x86_6 ...
- ZooKeeper应用案例
我们通过学习借鉴,哪些项目或应用都使用了ZooKeeper,可以了解我们的应用使用ZooKeeper是否能真正地带来价值,当然,有些项目可能也未必非常适合使用ZooKeeper,我们要批判地学习.借鉴 ...
- [NOIP2014]无线网站发射器选址
Description 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网.假设该城市的布局为由严格平行的129条东西向街道和129条南北向街道所形成的网格状, ...
- AttributeError: module 'shutil' has no attribute 'copyfileobj'
import shutil #1.copyfileobj(源文件,目标文件) 将文件内容复制到另一个文件 shutil.copyfileobj(open('config.log','r'),open( ...
- python学习之TCP/UDP
TCP/UDP都是网络编程(socket)的两种基于C/S结构的程序. UDP的9999端口与TCP的9999端口可以各自绑定. UDP:非可靠连接速度快,服务器:创建socket 绑定ip和端口后直 ...
- jsp get与post请求乱码问题
乱码问题01:<%reques.setCharacterEncoding("utf-8");%> 02:get请求乱码 001.:String 编码之后的字符串 = n ...
- user-select详解
语法: user-select:none | text | all | element 默认值:text 适用于:除替换元素外的所有元素 继承性:无 动画性:否 计算值:指定值 取值: none: 文 ...
- Java编程基础-异常
一.异常 1.什么是异常 在java中,程序在运行时出现的不正常情况称为异常,以异常类的形式对这些非正常情况进行封装,通过异常处理机制对程序运行时发生的各种问题进行处理.其实就是java对不正常情况进 ...
- 国内的Jquery CDN免费服务
Jquery是个非常流行的JS前端框架,在很多网站都能看到它的身影.很多网站都喜欢采用一些Jquery CDN加速服务,这样网站加载jquery会更快.之前火端网络的一些网站都是使用Google的jq ...
- 学习用5W1H来管理自己的项目/工作
学习用5W1H来管理自己的项目/工作 最近开始需要系统化的思维模型,这只是一个开始,一下用脑图的形式来简介5W1H的具体内容: 先写xmind思维树的文本导出,后面附上图片.^ _ ^ 5W1H ...