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

王小婷

发布于 2025-05-19 06:27:09

3500

代码可运行

文章被收录于专栏：编程微刊编程微刊

运行总次数：0

代码可运行

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