React中,input外边如果包一个div,可以把input的onChange事件绑定到div上面,并且也生效
最近第一次开始学习封装组件,遇到几个比较神奇的问题。
首先就是如果input外边包一个div,如果把input的onChange事件绑定到div上,也会生效
<div onChange={(e)=>{console.log(e.target.value)}}>
<Input/>
</div>
还有,如果封装了一个组件,那么里面的最外层元素的{...this.props}需要慎用,虽然这样子做,可以把样式传过来,并且生效,但是会报错
React中,input外边如果包一个div,可以把input的onChange事件绑定到div上面,并且也生效的更多相关文章
- React 中的 定义组件的 两种方式
React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...
- JS中事件绑定函数,事件捕获,事件冒泡
1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...
- DICOM:再次剖析fo-dicom中DicomService的自己定义事件绑定
题记: 趁着<从0到1>大火的热潮,最近又一次翻阅了一遍<从一到无穷大>(这样是不是感觉整个非负数轴就圆满了^_^). 尽管作为科普类书籍.可是里面的内容还是比較深奥,幸亏有作 ...
- react中使用Input表单双向绑定方法
input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete="ne ...
- react中input自动聚焦问题
input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...
- React中input框设置value报错解析
react input 不设置onChange的常见错误截图 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑. React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们 ...
- vue 点击一个div,使input获得焦点
<div class="inputMessage" @click="inputMessage">输入留言</div> <input ...
- react中IOS手机里面两个input同时存在时,聚焦focus失效解决办法
最近在做webapp搜索功能时,用到两个input同时存在时,轻点input聚焦时,ios手机软键盘弹起又失效,一直在寻找合理的解决办法,现在最简单的总结回顾: <一>bug显示 < ...
- react中的DOM操作
前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 ...
随机推荐
- vim 快捷键 清空文件所有内容
vim清空文件所有内容 在使用vim编辑器的时候,有时候编辑一个文件,而文件内容比较多,如果需要快速清空整个文件,可以使用一下命令: 在命令模式下,首先执行 gg 这里是跳至文件首行 再执行: dG ...
- org/springframework/cache/jcache/config/AbstractJCacheConfiguration.class
在使用Spring-MVC环境时 报错: Failed to parse configuration class [org.springframework.cache.aspectj.AspectJ ...
- React Native使用NetInfo对当前系统网络的判断
有网状态: 断网状态: 代码如下: 注意:第一次参考了http://www.hangge.com/blog/cache/detail_1614.html代码,一直显示的是unknow状态... 最后处 ...
- AWS物联网解决方案之:如何将设备安全地接入AWS IoT
1 简介 AWS IoT解决方案是一个全托管的云平台,使互联设备可以轻松安全地与云应用程序及其他设备交互.AWS IoT可以支持数十亿太设备和数万亿条消息,并且可以对这些消息进行处理并将其安全可靠地路 ...
- js中的正则表达式小结1
正则表达式总结 创建正则对象:var regex=new RegExp(/\d/); 一般都用直接量,写法更简洁:var regex=/\d/; test()方法用来验证字符串是否符合规则,返回tru ...
- Velocity 数值格式化(NumberTool工具类):保留两位小数和格式化千分位、取整
Velocity 自带的工具类:NumberTool 实现数字格式化:保留两位小数和格式化千分位,以及取整. NumberTool 的 format(String format, Object obj ...
- golang的定时器NewTimer、NewTicker使用
package main import ( "fmt" "sync" "time" ) /** *ticker只要定义完成,从此刻开始计时, ...
- linux之dup和dup2函数解析
1. 文件描述符在内核中数据结构在具体说dup/dup2之前,我认为有必要先了解一下文件描述符在内核中的形态.一个进程在此存在期间,会有一些文件被打开,从而会返回一些文件描述符,从shell中运行一个 ...
- git 服务端安装
服务器端创建 git 用户,用来管理 Git 服务,并为 git 用户设置密码 [root@localhost home]# id git id: git:无此用户 [root@localhost h ...
- Junit测试类中如何调用Http通信
在使用Junit做测试的时候,有时候需要调用Http通信,无论是request还是response或者是session会话,那么在测试类里该如何调用呢,其实很简单,spring给我们提供了三个类 or ...