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初识整理(三)--受控组件解决方法的更多相关文章

  1. React初识整理(五)--Redux和Flux(解决状态传递问题)

    Flux 1.引入:在React的应⽤中,状态管理是⼀个⾮常重要的⼯作.我们不会直接对DOM节点进⾏操作,⽽是通过将数据设置给state,由state来同步UI,这种⽅式有个潜在的问题,每个组件都有独 ...

  2. react系列(三)组件间通信

    组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...

  3. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  4. SqlServer 由于未在SqlServer的此实例上安装复制组件解决方法

    sqlserver2005在复制订阅时出现: “由于未在SqlServer的此实例上安装复制组件,Microsoft SQL server 无法访问这些组件,请参阅SQL Server……” 解决方法 ...

  5. react中直接调用子组件的方法(非props方式)

    我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行 ...

  6. react 表单(受控组件和非受控组件)

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  7. react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

    第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...

  8. React初识整理(二)--生命周期的方法

    React生命周期主要有7中: 1. componentWillMount() :组件将要挂载时触发 ,只调用1次 2. componentDidMount() :组件挂载完成时触发,只调用1次 3. ...

  9. React初识整理(一)

    一.React的特点 1.自动化的UI状态管理:自动完成数据变化与界面效果的更新. 2.虚拟DOM:创建1个虚拟的dom节点树,放在内存里(内存修改数据效率高),数据变化时先修改内存里的虚拟DOM,然 ...

随机推荐

  1. P4443 [COCI2017-2018#3] Dojave(线段树)

    传送门 设\(lim=2^n-1\),对于一个区间\([l,r]\)来说,如果\(sum\neq lim\)且能换出\(x\)并换进\(y\)来,使得\(sum\bigoplus a_x\bigopl ...

  2. Node.js 内置模块fs(文件系统)

    fs模块的三个常用方法 1.fs.readFile() -- 读文件 2.fs.writeFile() -- 写文件 3.fa.stat() -- 查看文件信息 fs模块不同于其它模块的地方是它有异步 ...

  3. __setitem__,__getitem,__delitem__

    目录 __setitem__ __getitem__ __delitem__与__delattr__ class Foo: def __init__(self, name): self.name = ...

  4. C 语言实例 - 计算平均值

    C 语言实例 - 计算平均值 C 语言实例 C 语言实例 使用数组来计算几个数的平均值. 实例 #include <stdio.h> int main() { int n, i; ], s ...

  5. python 操作mysql数据库存

    代码: 说明:由于我本机没有安装数据库,数据库是在远程访问的,故地址不是localhost # __author__ = 'STEVEN' import pymysql host = '10.1.1. ...

  6. django项目设置

    1 项目下的文件 用于项目设定的setting.py 用于url规则匹配的urls.py 用于创建socket对象的wsgi.py 2 urls django2.0相比1.x,在url匹配语法上有很大 ...

  7. Codeforces Round #541 (Div. 2) C.Birthday

    链接:https://codeforces.com/contest/1131/problem/C 题意: 求给的n个数,相邻差值最小的排列方式.1-n相邻. 思路: sort后隔一个取一个,取到底后再 ...

  8. SDIO学习

    https://baijiahao.baidu.com/s?id=1561100856106707&wfr=spider&for=pc http://www.eepw.com.cn/a ...

  9. [已读]精通AngularJS

    觉得可以看第二遍,内容其实还不错啦,就是翻译会有点生硬.

  10. APACHE服务器httpd.exe进程占用cpu100%的解决方法

    httpd.exe进程占用cpu%100,关闭掉AppServ服务,cpu应用率立刻下降到0. 重新启动AppServ又出现占用cpu高的情况. 原因,httpd.exe和防火墙配置有冲突. 解决方法 ...