不管是在原生的js还是vue中,所有的事件都有其事件对象,该事件对象event中包含着所有与事件相关的信息,在react中,所有的事件也有其事件对象,在触发DOM上的某个事件时,就会产生一个事件对象。

在开始前,先按照之前创建项目的方法新建一个项目,然后对项目目录进行整理,并新建一个组件,在App.js中引入该组件。

获取事件对象

首先在组件中添加一个按钮,并为按钮添加一个点击事件,点击打印该事件的事件对象。

点击按钮触发事件,打印该事件的事件对象。

在这个事件对象中,有很多的字段,用的比较多就是targetl了,例如实现下面的一些用法。

表单事件

在vue中,通过事件双向绑定,我们可以很轻松的获取到用户输入的值,但是在react中,并没有这种数据流,所以,当我们需要获取到用户输入的input值时,就需要使用最原始的方法了:

  1. 监听input框的改变事件
  2. 在改变事件中获取输入的值
  3. 在构造函数中添加一个数据inputValue,并将获取的值赋值给inputValue
  4. 获取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事件中的事件对象和常见事件的更多相关文章

  1. js事件中的event对象

    addEvent(oDiv,"click",function(event){ console.log(event.bubbles+"事件是否冒泡"); cons ...

  2. ng-change事件中如何获取$event和如何在子元素事件中阻止调用父级元素事件(阻止事件冒泡)

    闲聊: 今天小颖要实现一个当改变了select内容后弹出一个弹框,并且点击select父元素使得弹框消失,这就得用到阻止事件的冒泡了:$event.stopPropagation(),然而小颖发现,在 ...

  3. react native 中webview内的点击事件传到外部原生调用

    先说一下我使用webview的时候遇到的一个功能需求 是这样的,上图中的这个页面是用h5做的,但是由于点击"我的优惠劵"是需要跳转到我原生的页面,也就是说我需要获得这个h5提供的点 ...

  4. silverlight中鼠标放在对象的提示事件

    1.xaml 中实现 <Rectangle x:Name="toolTip" Grid.Column="0" Grid.Row="1" ...

  5. Python 中Semaphore 信号量对象、Event事件、Condition

    Semaphore 信号量对象 信号量是一个更高级的锁机制.信号量内部有一个计数器而不像锁对象内部有锁标识,而且只有当占用信号量的线程数超过信号量时线程才阻塞.这允许了多个线程可以同时访问相同的代码区 ...

  6. Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件

    鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...

  7. javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件

    javascript事件之鼠标滚轮(mousewheel)和DOMMouseScroll事件 发布时间:2015-02-07   编辑:www.jquerycn.cn 本文学习下,javascript ...

  8. react事件中的this指向

    在react中绑定事件处理函数的this指向一共有三种方法,本次主要总结这三种方式. 项目创建 关于项目的创建方法,在之前的文章中有记录,这里不再赘述,项目创建成功后,按照之前的目录结构对生成的项目进 ...

  9. 优雅的在React组件中注册事件

    前言 在React的开发中,我们经常需要在 window 上注册一些事件, 比如按下 Esc 关闭弹窗, 按上下键选中列表内容等等.比较常见的操作是在组件 mount 的时候去 window 上监听一 ...

随机推荐

  1. mvc core2.1 Identity.EntityFramework Core 用户列表预览 删除 修改 (五)

    用户列表预览 Controllers->AccountController.cs [HttpGet] public IActionResult Index() { return View(_us ...

  2. 20165313 《Java程序设计》第九周学习总结

    教材学习总结 1.URL类 :ava.net包中的URL类是对统一资源定位符的抽象,使用URL创建对象的应用程序称作客户端程序,客户端程序的URL对象调用InputStream openStream( ...

  3. Properties 类的使用

    定义: 表示一个持久的集合,可以存在流中,或者从流中加载.是Hashtable子类,map集合方法都可以用. 方法的使用: /* * 集合对象 properties继承Hashtable实现了Map接 ...

  4. List接口的使用方法

    ★List接口特点: 1.元素存储有序的集合 2.带索引的集合 3.集合中可以有重复的元素 4.常用的子类有ArrayList ,  LinkedList ★List接口的方法:add   , rem ...

  5. 数学 它的内容,方法和意义 第一卷 (A. D. 亚历山大洛夫 著)

    第一章 数学概观 (已看) 1. 数学的特点 2. 算术 3. 几何 4. 算术和几何 5. 初等数学时代 6. 变量的数学 7. 现代数学 8. 数学的本质 9. 数学发展的规律性 第二章 数学分析 ...

  6. Python_getter和setter方法

    当给属性赋值的时候,使用实例.属性=属性值的方式显然把属性暴露出来了,并且也无法对属性值进行限制检查,java中提供了setter和getter方法,那么python是如何做的呢?更多内容请参考:Py ...

  7. 拷贝某个区间(copy,copy_back)

    copy 为outputIterator中的元素赋值而不是产生新的元素,所以outputIterator不能是空的 如要元素安插序列,使用insert成员函数或使用copy搭配insert_itera ...

  8. ASP.NET MVC中有四种过滤器类型

    在ASP.NET MVC中有四种过滤器类型

  9. KVM部署、使用、调优

     背景介绍 传统数据中心面临的问题: 资源使用率低 资源分配不均 自动化能力差 初始化成本高   云计算: 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计 ...

  10. C++ dynamic reflection

    相关想法以及lib Lua 有想过用reflection实现lua binding,但没想过反过来 moc依赖于qt的lib,不考虑了https://github.com/rttrorg/rttr V ...