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

首先就是如果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. js生成带log的二维码(qrcodejs)

    github: qrcodejs cdn: http://static.runoob.com/assets/qrcode/qrcode.min.js #qrcode #qrcode margin: 2 ...

  2. 容器版Jenkins连接Kubernetes---------非容器版jenkins是无法安装kubenetes插件的,所以无法连接k8s

    容器版Jenkins连接Kubernetes 特别注意:必须用谷歌浏览器,而且非容器版jenkins是无法安装kubernetes插件的,所以无法连接k8s 一.环境说明 OS系统版本:Ubuntu ...

  3. ThreadingTCPServer源码解析

    实例 #!/usr/bin/env python #-*- coding:utf-8 -*- import SocketServer class Myserver(SocketServer.BaseR ...

  4. webdriervAPI(控制浏览器及简单元素操作)

    from  selenium  import  webdriver driver  =  webdriver.Chorme() driver.get("http://www.baidu.co ...

  5. selenium+python自动化框架

    流程: 环境准备 eclipse :需安装pydev.testng插件 python :安装python完成后,需 pip下安装selenium:命令: pip install selenium 我现 ...

  6. javaweb期末项目-stage2-项目创建、配置、接口设计和功能实现(含核心源码)

    项目的创建.配置.接口设计和功能实现(含核心代码).rar--下载 说明:解压密码为袁老师的全名拼音(全小写) 相关链接: 项目结构:https://www.cnblogs.com/formyfish ...

  7. Ubuntu 18.04 更换阿里源

    1.备份 sudo cp /etc/apt/source.list /etc/apa/source.list.bak 2.编辑 sudo vim /etc/apt/source.list 3.修改内容 ...

  8. [Agc029C]Lexicographic constraints_进制_二分答案_贪心

    Lexicographic constraints 题目链接:https://atcoder.jp/contests/agc029/tasks/agc029_c 数据范围:略. 题解: 二分是显然的, ...

  9. Java集合框架——Map接口

    第三阶段 JAVA常见对象的学习 集合框架--Map集合 在实际需求中,我们常常会遇到这样的问题,在诸多的数据中,通过其编号来寻找某一些信息,从而进行查看或者修改,例如通过学号查询学生信息.今天我们所 ...

  10. kafka producer interceptor拦截器(五)

    producer在发送数据时,会经过拦截器和序列化,最后到达相应的分区.在经过拦截器时,我们可以对发送的数据做进步的处理. 要正确的使用拦截器需要以下步骤: 1.实现拦截器ProducerInterc ...