React中,input外边如果包一个div,可以把input的onChange事件绑定到div上面,并且也生效

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

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

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

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

原文地址:https://www.cnblogs.com/zoeeying/p/11439531.html

时间: 2024-08-28 20:04:19

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

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

题记: 趁着<从0到1>大火的热潮,最近又一次翻阅了一遍<从一到无穷大>(这样是不是感觉整个非负数轴就圆满了^_^). 尽管作为科普类书籍.可是里面的内容还是比較深奥,幸亏有作者精准的翻译,一番细细品味后宛如醍醐灌顶,心中透亮. 一直幻想有外星人.宇宙外生物的存在,从<源代码>描写叙述的"平行世界",到<星际穿越>的"超维空间",再到时下泛滥的穿越剧,却总未解开心中那团疑惑. 也许仅仅有时间的流逝才干给我解答,仅仅怕光

react中input自动聚焦问题

input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用refs解决input聚焦的问题有两种应用场景: 1.组件内部: 在input内部定义ref,当给 HTML 元素添加 ref 属性时,ref 回调接收了底层的 DOM 元素作为参数.例如,下面的代码使用 ref 回调来存储 DOM 节点的引用. class CustomTextInput extend

react入门,使用create-react-app搭建一个todolist-dome。

第一步:安装create-react-app脚手架 1 npm install -g create-react-app 第二步:创建你的todo-list项目 1 // 在命令行输入如下命令 2 create-react-app todo-list 3 //注意npm命名限制,项目名称不能含有大写字母. 第三步:清除项目中不必要的文件 1 /** 2 - src目录中的:App.css, App.test.js, logo.svg, serviceWorker.js文件 3 - public目录

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非

react入门-----(jsx语法,在react中获取真实的dom节点)

1.jsx语法 1 var names = ['Alice', 'Emily', 'Kate']; 2 <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写 --> 3 ReactDOM.render( 4 <div> 5 { 6 names.map(function (name) { 7 return <div>Hello, {name}!</div> 8

React中的表单应用

React中的表单应用 用户在表单填入的内容,属于用户跟组件的互动,所以不能用this.props读取. var Input = React.createClass({ //初始化组件数据 getInitialState(){ return {value:'hello'}; }, handleChange(event){ this.setState({value:event.target.value}) }, render(){ var value = this.state.value; <di

react中这些细节你注意过没有?

react中的一些细节知识点: 1.组件中get的使用(作为类的getter) ES6知识:class类也有自己的getter和setter,写法如下: Class Component { constructor() { super() this.name = '' } // name的getter get name() { ... } // name的setter set name(value) { ... } } react组件中的get的使用如下: /* * renderFullName的

React 中双项绑定

React 中双项绑定,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React--表单双项绑定</title> <scr

React 中组件间通信的几种方式

在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 非嵌套组件间通信 跨级组件之间通信 1.父组件向子组件通信父组件通过向子组件传递 props,子组件得到 props 后进行相应的处理.演示代码:父组件 parent.js: import React,{ Component } from "react"; export default class App extends Component{