React基础语法06-事件对象的应用

  • 2019 年 11 月 10 日
  • 笔记

老规矩，先看完官方文档，记录学习笔记： 教程：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;

VirMach 便宜 VPS

QNews

QNews