最近第一次开始学习封装组件，遇到几个比较神奇的问题。

首先就是如果input外边包一个div，如果把input的onChange事件绑定到div上，也会生效

<div onChange={(e)=>{console.log(e.target.value)}}>

    <Input/>

</div>

还有，如果封装了一个组件，那么里面的最外层元素的{...this.props}需要慎用，虽然这样子做，可以把样式传过来，并且生效，但是会报错

React中，input外边如果包一个div，可以把input的onChange事件绑定到div上面，并且也生效的更多相关文章

  1. React 中的 定义组件的 两种方式

    React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...

  2. JS中事件绑定函数，事件捕获，事件冒泡

    1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...

  3. DICOM：再次剖析fo-dicom中DicomService的自己定义事件绑定

    题记: 趁着<从0到1>大火的热潮,最近又一次翻阅了一遍<从一到无穷大>(这样是不是感觉整个非负数轴就圆满了^_^). 尽管作为科普类书籍.可是里面的内容还是比較深奥,幸亏有作 ...

  4. react中使用Input表单双向绑定方法

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

  5. react中input自动聚焦问题

    input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...

  6. React中input框设置value报错解析

    react input 不设置onChange的常见错误截图 表单是前端非常重要的一块内容,并且往往包含了错误校验等逻辑.  React对表单元素做了专门的优化处理,他对表单元素做了一些抽象,使得他们 ...

  7. vue 点击一个div，使input获得焦点

    <div class="inputMessage" @click="inputMessage">输入留言</div> <input ...

  8. react中IOS手机里面两个input同时存在时，聚焦focus失效解决办法

    最近在做webapp搜索功能时,用到两个input同时存在时,轻点input聚焦时,ios手机软键盘弹起又失效,一直在寻找合理的解决办法,现在最简单的总结回顾: <一>bug显示 < ...

  9. react中的DOM操作

    前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 ...

随机推荐

  1. android设置gps自动开启

    1.第一种方法 private void toggleGPS() { Intent gpsIntent = new Intent(); gpsIntent.setClassName("com ...

  2. sqlmap注入工具----一次简单的注入（实战）

    最近在学习网络安全,挖洞避免不了要使用许多工具,使用著名注入工具sqlmap的时候,对于英语不怎么好的我就比较难受了,本来就不会使用,加之又是英语的,简直难受.上网找了好多详细教程,但是命令实在是太多 ...

  3. Nonce

    Nonce是或Number once的缩写,在密码学中Nonce是一个只被使用一次的任意或非重复的随机数值. 在加密技术中的初始向量和加密散列函数都发挥着重要作用,在各类验证协议的通信应用中确保验证信 ...

  4. 知识点整理-mysql怎么查看优化器优化后的sql

    背景 1.新建两张表 CREATE TABLE t1 (m1 )); CREATE TABLE t2 (m2 )); 2.插入些数据 INSERT INTO t1 VALUES(, , , 'c'); ...

  5. Flutter中通过循环渲染组件

    class ContactsState extends State<Contacts>{ List formList; initState() { super.initState(); f ...

  6. Bootstrap, 模态框实现值传递,自动勾选

    目录 Bootstrap,模态框自动勾选,值传递 1.父页面 2. 子页面(modal) 模态框 Bootstrap,模态框自动勾选,值传递 场景: ​ 有一个这样的需求, 在父页面有一个table, ...

  7. QFramework 使用指南 2020（五）：脚本生成（3）生成 Prefab

    在上一篇,我们简单介绍了 ViewController 的嵌套实现. 在这一篇,我们学习 ViewController 脚本生成的最后一个功能,即:生成 Prefab. 实际上这个功能非常简单. 我们 ...

  8. Egret入门学习日记 --- 第六篇（书中 3.6~3.9节 内容）

    第六篇(书中 3.6~3.9节 内容) 在本篇写之前,还是要为昨天写的日记道歉才行,差点就误人子弟了. 没想到在程序员界最低级的错误 “单词拼写错误” 还是会经常犯. childrenCreated ...

  9. 什么是sigmoid激活函数？

    上面我们讲了引入激活函数的意义,激活函数有多种,下面我们拿一种激活函数sigmoid来做示例,其他的类似.sigmoid函数表达式如下: ​ 它的函数曲线图是: ​ 看到上面的函数曲线图,可以看出是一 ...

  10. 攻防世界MISC新手练习

    0x01 this_is_flag 对!!!这就是flag 0x02 ext3 题目提示是Linux光盘,附件下载下来 在linux中挂载mount linux /mnt 找一下flagtrings ...