【react input的几个坑】

1、input标签中设置value后，input进入controlled模式，valuechange由自动变为手动，导致input无法编辑。如：

　　<input value="xxx"/> // 导致无法编辑

　解法：使用代码来对input.value赋值即可。如 this.nameInput.value="xxx"

2、defaultValue只在第一次绘制时会启用。这意味着，如果首次绘制为""，而后面绘制为"value"，则defalutValue始终为""。如：

　　<input defalutValue={this.props.name}>

　　如果第一次this.props.name为""，第二次及以后为“value”，则input始终显示""。

　　鉴于以上两个巨坑，使用input时，不要通过jsx来操作input的value、defaultValue属性。通过代码直接对.value进行控制即为最佳实践。

react input的几个坑的更多相关文章

  1. key diff 在input上的踩坑

    1.在react-native 遇到一个坑,希望的效果如下,同一个按钮,不同的状态下显示不同的input. 2.然后,在做的时候遇到了这样一个问题.输入我的姓名,点击下一步 3.问题出来了,输入框已经 ...

  2. React总结和遇到的坑

    一.react项目 前端react后端node:https://github.com/GainLoss/react-juejin 前端react后端Pyton:https://github.com/G ...

  3. 【react native】有关入坑3个月RN的心路历程

    由于一些原因,笔者最近变更到了RN的团队,回归到了hybrid app的开发的圈子中,固然是有蛮多新鲜感和新机遇的,不过遥想起以前在hybrid中各种view之前跳转的头疼等各种问题,笔者怀着忐忑的心 ...

  4. 【react native】rn踩坑实践——从输入框“们”开始

    因为团队技术栈变更为react native,所以开始写起了rn的代码,虽然rn与react份数同源,但是由于有很多native有关的交互和变动,实际使用还是碰到蛮多问题的,于是便有了这个系列,本来第 ...

  5. React Native 环境搭建踩坑

    React Native (web Android)环境搭建踩坑(真的是一个艰辛的过程,大概所有坑都被我踩了 官方文档地址 : https://facebook.github.io/react-nat ...

  6. 如何触发react input change事件

    页面用react来进行开发的,想触发react组件里面input的change事件,用Jquery的trigger来触发没有效果,必须使用原生的事件来进行触发. var event = new Eve ...

  7. react Input 表单

    ​ input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete=" ...

  8. react input 获取/失去焦点

    <div className={ this.state.focus ? "dis_bottom_left_onfocus" : "dis_bottom_left&q ...

  9. 谈谈出入React框架踩过的坑

    1 在JSX的元素中写入内联样式,例如<div style={"color:blue"}></div> 报错:warning:Style prop valu ...

随机推荐

  1. mysql之完整性约束

    主要内容 not null 与 default unique primary auto_increment foreign key 约束条件作用:用于保证数据的完整性和一致性 主要分为 PRIMARY ...

  2. 本地计算机上的OracleDBConsoleorcl服务启动后停止

    emca -repos dropemca -repos createemca -config dbcontrol db 这三步你都运行成功了也没有报错?最后没有提示你dbcontrol已经启动了么?, ...

  3. 8.2.优化SQL语句

    8.2.优化SQL语句 数据库应用程序核心操作逻辑都是通过执行SQL语句来执行,不管是直接通过解释器还是通过后台API提交. 调优手册里面的这一节内容帮助各种各样MySQL程序加快速度.手册包括SQL ...

  4. c++ maps使用

    #include <iostream> #include <stdio.h> #include <memory.h> #include <queue> ...

  5. 浮动ip cz

  6. 1.理解Numpy、pandas

    之前一直做得只是采集数据,而没有再做后期对数据的处理分析工作,自己也是有意愿去往这些方向学习的,最近就在慢慢的接触. 首先简单理解一下numpy和pandas:一.NumPy:1.NumPy是高性能计 ...

  7. 以虎嗅网4W+文章的文本挖掘为例，展现数据分析的一整套流程

    本文转自知乎 作者:苏格兰折耳喵 ----------------------------------------------------- 本文作者将结合自身经验,并以实际案例的形式进行呈现,涉及从 ...

  8. Unable to locate Spring NamespaceHandler for XML schema namespace [http://www.springframework.org/schema/tx]

    ERROR - Context initialization failed org.springframework.beans.factory.parsing.BeanDefinitionParsin ...

  9. Jquery的一些基本操作

    /*获得TEXT.AREATEXT的值*/ var textval = $("#text_id").attr("value"); //或者 var textva ...

  10. 一次ssh远程不能登录的排查

    原创文件,欢迎阅读,禁止转载. 今天发现一台主机不能远程了,ssh连接不上了. 排查过程是这样的:1. ping没问题. 2. 通过telnet看端口是否开启.[user@localhost ~]$ ...