react事件中的事件对象和常见事件
不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象。
在开始前,先按照之前创建项目的方法新建一个项目,然后对项目目录进行整理,并新建一个组件,在App.js中引入该组件。
获取事件对象
首先在组件中添加一个按钮,并为按钮添加一个点击事件,点击打印该事件的事件对象。
点击按钮触发事件,打印该事件的事件对象。
在这个事件对象中,有很多的字段,用的比较多就是targetl了,例如实现下面的一些用法。
表单事件
在vue中,通过事件双向绑定,我们可以很轻松的获取到用户输入的值,但是在react中,并没有这种数据流,所以,当我们需要获取到用户输入的input值时,就需要使用最原始的方法了:
- 监听input框的改变事件
- 在改变事件中获取输入的值
- 在构造函数中添加一个数据inputValue,并将获取的值赋值给inputValue
- 获取state里面的inputvalue
完整的写法如下:
import React from 'react';
class Test extends React.Component{
constructor(props){
super(props);
this.state={
msg:'我是一个组件',
inputValue:''
}
}
changeInput=(event)=>{
console.log(event.target.value);
this.setState({
inputValue:event.target.value
})
}
getInput=()=>{
console.log(this.state.inputValue)
}
render(){
return(
<div>
{this.state.msg}
<br/>
<input onChange={this.changeInput}/>
<button onClick={this.getInput}>取值</button>
</div>
)
}
}
export default Test;
ref获取DOM节点
在上面的例子中,通过事件对象的target获取到了用户输入的值,虽然值拿到了,但是过程比较麻烦,在react中,除了target字段以外,还可以通过ref字段获取DOM节点,从而获取我们想要的信息,例如在上面的例子中,想要获取用户输入的input的值,可以为input添加ref并指定名字,在触发的事件中就可以通过ref的名字找到相应的节点,从而获取数据了。
import React from 'react';
class Test extends React.Component{
constructor(props){
super(props);
this.state={
msg:'我是一个组件',
inputValue:''
}
}
getInput=()=>{
let val = this.refs.ivalue.value;
this.setState({
inputValue:val
});
console.log(this.state.inputValue);
}
render(){
return(
<div>
{this.state.msg}
<br/>
<input ref="ivalue" />
<button onClick={this.getInput}>取值</button>
</div>
)
}
}
export default Test;
模拟实现数据双向绑定
import React from 'react';
class Test extends React.Component{
constructor(props){
super(props);
this.state={
inputValue:'123'
}
}
getInput=(e)=>{
this.setState({
inputValue:e.target.value
});
}
render(){
return(
<div>
{this.state.inputValue}
<br/>
<input value={this.state.inputValue} onChange={this.getInput}/>
</div>
)
}
}
export default Test;
react事件中的事件对象和常见事件的更多相关文章
- js事件中的event对象
addEvent(oDiv,"click",function(event){ console.log(event.bubbles+"事件是否冒泡"); cons ...
- ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件(阻止事件冒泡)
闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...
- react native 中webview内的点击事件传到外部原生调用
先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...
- silverlight中鼠标放在对象的提示事件
1.xaml 中实现 <Rectangle x:Name="toolTip" Grid.Column="0" Grid.Row="1" ...
- Python 中Semaphore 信号量对象、Event事件、Condition
Semaphore 信号量对象 信号量是一个更高级的锁机制.信号量内部有一个计数器而不像锁对象内部有锁标识,而且只有当占用信号量的线程数超过信号量时线程才阻塞.这允许了多个线程可以同时访问相同的代码区 ...
- Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件
鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...
- javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件
javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件 发布时间:2015-02-07 编辑:www.jquerycn.cn 本文学习下,javascript ...
- react事件中的this指向
在react中绑定事件处理函数的this指向一共有三种方法,本次主要总结这三种方式. 项目创建 关于项目的创建方法,在之前的文章中有记录,这里不再赘述,项目创建成功后,按照之前的目录结构对生成的项目进 ...
- 优雅的在React组件中注册事件
前言 在React的开发中,我们经常需要在 window 上注册一些事件, 比如按下 Esc 关闭弹窗, 按上下键选中列表内容等等.比较常见的操作是在组件 mount 的时候去 window 上监听一 ...
随机推荐
- mvc core2.1 Identity.EntityFramework Core 用户列表预览 删除 修改 (五)
用户列表预览 Controllers->AccountController.cs [HttpGet] public IActionResult Index() { return View(_us ...
- 20165313 《Java程序设计》第九周学习总结
教材学习总结 1.URL类 :ava.net包中的URL类是对统一资源定位符的抽象,使用URL创建对象的应用程序称作客户端程序,客户端程序的URL对象调用InputStream openStream( ...
- Properties 类的使用
定义: 表示一个持久的集合,可以存在流中,或者从流中加载.是Hashtable子类,map集合方法都可以用. 方法的使用: /* * 集合对象 properties继承Hashtable实现了Map接 ...
- List接口的使用方法
★List接口特点: 1.元素存储有序的集合 2.带索引的集合 3.集合中可以有重复的元素 4.常用的子类有ArrayList , LinkedList ★List接口的方法:add , rem ...
- 数学 它的内容,方法和意义 第一卷 (A. D. 亚历山大洛夫 著)
第一章 数学概观 (已看) 1. 数学的特点 2. 算术 3. 几何 4. 算术和几何 5. 初等数学时代 6. 变量的数学 7. 现代数学 8. 数学的本质 9. 数学发展的规律性 第二章 数学分析 ...
- Python_getter和setter方法
当给属性赋值的时候,使用实例.属性=属性值的方式显然把属性暴露出来了,并且也无法对属性值进行限制检查,java中提供了setter和getter方法,那么python是如何做的呢?更多内容请参考:Py ...
- 拷贝某个区间(copy,copy_back)
copy 为outputIterator中的元素赋值而不是产生新的元素,所以outputIterator不能是空的 如要元素安插序列,使用insert成员函数或使用copy搭配insert_itera ...
- ASP.NET MVC中有四种过滤器类型
在ASP.NET MVC中有四种过滤器类型
- KVM部署、使用、调优
背景介绍 传统数据中心面临的问题: 资源使用率低 资源分配不均 自动化能力差 初始化成本高 云计算: 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计 ...
- C++ dynamic reflection
相关想法以及lib Lua 有想过用reflection实现lua binding,但没想过反过来 moc依赖于qt的lib,不考虑了https://github.com/rttrorg/rttr V ...