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

首先就是如果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. /proc/sys/net/ipv4/ip_conntrack_max

    Things to know (best practices and “issues”) READ IT !!! — uWSGI 2.0 documentationhttps://uwsgi-docs ...

  2. 国内it论坛

    社区是聚集一类具有相同爱好或者相同行业的群体,IT技术社区就是聚集了IT行业内的技术人,在技术社区可以了解到行业的最新进展,学习最前沿的技术,认识有相同爱好的朋友,在一起学习和交流. 技术社区一般有三 ...

  3. Jenkins 搭建企业实战案例 (发布与回滚)

    让我们的代码部署变得easy,不再难,Jenkins是一个可扩展的持续集成引擎,是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能.Jenkins非常易于安装和配置,简单易用 ...

  4. python之Anaconda python3.7安装

    1.下载 https://www.anaconda.com/distribution/ #你会发现,使用windows下载十分慢,既然这样,为何不尝试centos(linux)安装呢?本人使用cent ...

  5. 深入理解Flink ---- Metrics的内部结构

    从Metrics的使用说起 Flink的Metrics种类有四种Counters, Gauges, Histograms和Meters. 如何使用Metrics呢? 以Counter为例, publi ...

  6. 图像分割-Mask Scoring R-CNN

    转载:https://zhuanlan.zhihu.com/p/58291808 论文链接:https://arxiv.org/abs/1903.00241 代码链接:https://github.c ...

  7. [Scikit-learn] 2.3 Clustering - Spectral clustering

    From: 2.3.5 Clustering - Spectral clustering From: 漫谈 Clustering (4): Spectral Clustering From: 漫谈 C ...

  8. 用Keras搭建神经网络 简单模版（五）——RNN LSTM Regressor 循环神经网络

    # -*- coding: utf-8 -*- import numpy as np np.random.seed(1337) import matplotlib.pyplot as plt from ...

  9. Lua中用table统一管理需要获取的unity物体

    unity上的组件,可以用table统一管理 然后在初始化时候统一给table赋值,这样需要用到时候直接调用table中对应的key便可拿到对应的物体,省下了在脚本开头一堆声明的脚本,这样就不用声明这 ...

  10. 关于使用Arduino做开发的理解

    转载自arduino中文社区 https://www.arduino.cn/thread-5414-1-1.html 见到很多人对Arduino的开发方法 .应用场景有误解,特别开个帖子说明下. 误解 ...