React基础语法06-事件对象的应用
老规矩，先看完官方文档，记录学习笔记： 教程：https://www.runoob.com/react/react-tutorial.html 文档：http://caibaojian.com/react/
react模板注释，和平时不太一样，使用快捷键ctrl+/
事件对象定义：
在触发DOM上的某个事件的时候，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。
当我们触发run方法的时候，想监听事件方法的时候，需要写出event，打印出来看这个事件对象是什么东西，打开控制台看一下。
run=(event)=>{
console.log(event)
}
实际应用：
应用1：改变dom节点颜色
比如：当我们点击按钮的时候，需要让按钮的颜色改变一下，变成红色的。
首先获取当前执行事件的dom节点。
run=(event)=>{
//console.log(event)
alert(event.target);
}
好的，以上获取到了dom节点了,然后要改变当前dom节点的颜色。
run=(event)=>{
//console.log(event)
alert(event.target);
event.target.style.background='red';
}
应用2：获取dom的属性
获取当前执行事件button按钮自定义的属性
run=(event)=>{
//console.log(event)
event.target.style.background='red';
//获取dom属性
alert(event.target.getAttribute('id'))
}<button id="123" onClick={this.run}>点击</button>
Home.js
import React, { Component } from 'react';
import photo from '../asset/images/photo.jpg';
import '../asset/css/index.css'
class Home extends Component {
constructor() {
super();
//react定义数据
this.state = {
msg: '我是王小婷定义的数据OO'
}
}
run = (event) => {
//console.log(event)
event.target.style.background = 'red';
//获取dom属性
alert(event.target.getAttribute('id'))
}
render() {
return (
<div>
<button id="123" onClick={this.run}>点击</button>
</div>
)
}
}
export default Home;本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录