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 上监听一 ...
随机推荐
- NYOJ 85:有趣的数(打表,规律)
85-有趣的数 内存限制:64MB 时间限制:3000ms 特判: No 通过数:8 提交数:12 难度:2 题目描述: 把分数按下面的办法排成一个数表. 1/1 1/2 1/3 1/4- 2/1 2 ...
- POJ 3468:A Simple Problem with Integers(线段树区间更新模板)
A Simple Problem with Integers Time Limit: 5000MS Memory Limit: 131072K Total Submissions: 141093 ...
- Web应用 布局
asp.net core系列 44 Web应用 布局 一.概述 MVC的视图与Razor页面经常共享视觉和程序元素,通过使用布局来完成,布局还可减少重复代码.本章演示了以下内容的操作方法:(1)使用通 ...
- servlet路径映射中的完全路径匹配、目录匹配、扩展名匹配
在servlet路径映射中,关于url-pattern的配置有三种,分别是完全路径匹配.目录匹配.扩展名匹配 其优先级分别为:完全路径匹配>目录匹配>扩展名匹配: 一.三种路径印射的区别 ...
- 【BZOJ4720】【NOIP2016】换教室
我当年真是naive…… 原题: 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节 课程安排在n个时间段上.在第i(1≤i≤n)个时间段上,两节 ...
- 【mybatis源码学习】mybtias一级,二级缓存
转载:https://www.cnblogs.com/ysocean/p/7342498.html mybatis 为我们提供了一级缓存和二级缓存,可以通过下图来理解: ①.一级缓存是SqlSessi ...
- hostswap dcevm
什么是dcevm dcevm(DynamicCode Evolution Virtual Machine)是java hostspot的补丁(严格上来说是修改),允许(并非无限制)在运行环境下修改加载 ...
- JavaScript Closures 闭包
在一些编程语言中, 当我们执行完成function中的局部代码仅在函数执行期间可运行. 但是JS 事不一样的 闭包总结来说, 就是innerFunction 总是有使用outer function 的 ...
- python之路---08 文件操作
二十六. 文件 f = open(文件路径,mode = '模式',encoding = '编码格式') 1.基础 ① 读写时,主要看光标的位置 ②操作完成要写 f.close( ) f.f ...
- 通过plsql develop查看建表语句
右键--查看 右下角 如下显示,找出ddl语句 可以看到索引等