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 的情况 ...
随机推荐
- [工具]tcping检查开放的端口
tcping小工具是一款用于tcp监控的软件.tcping小工具可以时刻监控服务器的网络情况,包括ping值和端口状态,可以突破机房和服务器的禁用设置,是一款十分实用的网络分析小工具. 下载地址:ht ...
- 图解 HTTP 笔记(七)——HTTPS
本章主要讲解 HTTPS 的基本原理,以及如何利用 HTTPS 防范 HTTP 通信过程中存在的伪装.窃听.篡改等问题 一.HTTP 的缺点 HTTP 在通信过程中会面临以下三种安全问题: 通信使用明 ...
- 怎样获取java新IO的Path文件大小
import org.junit.Test; import java.io.IOException; import java.nio.file.Files; import java.nio.file. ...
- React Native使用code-push实现热更新
这里就不记录了,下面的传送门介绍的通俗易懂,很详细,一步一步很容易实现成功. http://www.jianshu.com/p/f8689ccf0007
- Data - 数据挖掘的基础概念
主要内容来自于<微信公众号:程SIR说> 1 数据挖掘 数据挖掘(Data Mining,简称DM),是指从大量的数据中,挖掘出未知的且有价值的信息和知识的过程. 数据挖掘是一门交叉学科, ...
- 工具 --- Git使用
创建远程仓库 Github 首相在GitHub网站创建一个仓库:右上角加号➕,选择new repository 然后创建编辑仓库:名称.说明.是否公开.语言.分支风格等信息.然后创建. 复制仓库地址 ...
- Java基础——值传递
值传递? 参数传递的值的拷贝,改变拷贝不影响原参数. 引用传递? 参数传递的是参数本身,改变形参,实参也改变. Java中是什么传递? Java中只有值传递 实际情况为什么不对呢? 1. 基本数据类型 ...
- 递归-PrintDigit
static void PrintDigit(double n,int len,int count=-1) { if (n <0) { n = System.Math.Abs(n); Conso ...
- <cctype>的用法
#include<cctype> 1.isalnum() 检查字符c是十进制数还是大写还是小写字母.如果是,则返回true:如果不是,则返回false. 2.isalpha() 检查字符c ...
- 小程序部分机型上一个诡异的偶现bug
如上图所示:开始的时候进到下单页面,价格是0,当选中了商品产生价格的时候,生成的价格如 ¥150,这个时候会只露出¥1以及一小半的5,后面的都被遮挡住了. wxml里是这样的写的 <view w ...