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

首先就是如果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. [转][echarts]地图轮播

    代码片断: 来自:https://blog.csdn.net/qq_36947128/article/details/90899564 function Play(){ chart.dispatchA ...

  2. SQL-W3School-高级:SQL UNION 和 UNION ALL 操作符

    ylbtech-SQL-W3School-高级:SQL UNION 和 UNION ALL 操作符 1.返回顶部 1. SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT ...

  3. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_02-freemarker介绍

  4. 如何开始学习使用TensorFlow?

    Harrison Kinsley ——PythonProgramming.net的创始人 TensorFlow官方网站有相当多的文档和教程,但这些往往认为读者掌握了一些机器学习和人工智能知识.除了知道 ...

  5. 【leetcode_easy】543. Diameter of Binary Tree

    problem 543. Diameter of Binary Tree 题意: 转换一种角度来看,是不是其实就是根结点1的左右两个子树的深度之和呢.那么我们只要对每一个结点求出其左右子树深度之和,这 ...

  6. Security命名空间配置

    http://www.mossle.com/docs/springsecurity3/html/ns-config.html Security命名空间配置 2.1. 介绍 从Spring-2.0开始可 ...

  7. stm32第一章cortex-M3处理器概述

    处理器特点 哈弗结构3级流水线内核 实现Thumb-2指令集,告别切换32位的arm指令和16位的Thumb指令,优化性能和代码密度 结合可配置的嵌套向量中段控制器Nvic,提供非屏蔽中断NMI和32 ...

  8. Scrapy框架学习参考资料

    00.Python网络爬虫第三弹<爬取get请求的页面数据> 01.jupyter环境安装 02.Python网络爬虫第二弹<http和https协议> 03.Python网络 ...

  9. 安装ELectron失败解决方案

    npm安装Electron解决方案 Electron使用npm安装时,因为是国外的镜像源,所以速度会非常慢.而使用cnpm如下命令进行安装时,又会出现安装失败的问题: npm install elec ...

  10. 获取淘宝客推广位id(adzone_id)

    在 获取淘宝联盟选品库的宝贝信息 这个接口中需要用到 推广位id,那边这个ID在哪找呢?1.进入阿里妈妈后台>推广管理>推广位管理,如下图: 2.在推广位管理 列表页 找到 PID,最后一 ...