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 的情况 ...
随机推荐
- Java同步数据结构之ConcurrentLinkedQueue
前言 前面介绍的Queue都是通过Lock锁实现的阻塞队列,今天介绍一种非阻塞队列ConcurrentLinkedQueue,所谓非阻塞,其实就是通过CAS代替加锁来实现的高效的非阻塞队列.当许多线程 ...
- eclipse 创建web项目,新建servelet实例
参考: http://www.phperz.com/article/14/1127/38108.html http://jingyan.baidu.com/article/c843ea0b9aa914 ...
- [转]js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html 原贴:https://www.cnblogs.com/jasonwang2y60/p/6 ...
- JAVA 基础编程练习题24 【程序 24 根据输入求输出】
24 [程序 24 根据输入求输出] 题目:给一个不多于 5 位的正整数,要求:一.求它是几位数,二.逆序打印出各位数字. package cskaoyan; public class cskaoya ...
- VMware虚拟机下CentOS 6.5配置网络
使用NAT模式 虚拟机网络连接使用NAT模式,物理机网络连接使用Vmnet8. 虚拟机设置里面——网络适配器,网络连接选择自定义:Vmnet8 (NAT模式) 虚拟机菜单栏—编辑—虚拟网络编辑器,选择 ...
- Vue学习笔记(四)一起进阶吧
参考链接地址:https://segmentfault.com/a/1190000009188689?from=timeline Vuex框架原理与源码分析: http://tech.meituan. ...
- Jquery Easyui与Jquery Bootstrap的比较
1.easyui是js框架 :bootstrap 是css框架 ,bootstrap = 样式库 + 一堆jQuery插件,顺便解释一句,如果你只需要bootstrap的样式,你完全不用引入jQuer ...
- composer全量镜像使用方法
原文网址:https://pkg.phpcomposer.com/ Packagist 镜像使用方法 还没安装 Composer 吗?请往下看如何安装 Composer . 镜像用法 有两种方式启用本 ...
- jenkins部署Vue项目 & 远程到远程服务
只是记录下自己是怎么配置的,方便自己以后要用的时候查阅 如果使用nodejs打包则需要上图中的脚本,nodejs只是把JavaScript代码去掉空格个换行变成不易于人阅读的方式 (为了方便复制而已, ...
- Lua中用table统一管理需要获取的unity物体
unity上的组件,可以用table统一管理 然后在初始化时候统一给table赋值,这样需要用到时候直接调用table中对应的key便可拿到对应的物体,省下了在脚本开头一堆声明的脚本,这样就不用声明这 ...