React 事件对象 获取DOM

一、事件对象

在触发DOM上的某个事件时，会产生一个事件对象event。这个对象包含着所有与事件有关的信息。

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件'
        }
    }

    getEvent1 = (event) => {
        console.log(event)
    }
    getEvent2 = (str, event) => {
        console.log(str, event)
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <button onClick={this.getEvent1}>无传参下获取事件对象</button>
                <br/>
                <button onClick={this.getEvent2.bind(this, 'Hello World!')}>有传参下获取事件对象</button>
            </div>
        )
    }
}

按下无传参下获取事件对象按钮控制台打印出来的一部分信息
按下有传参下获取事件对象按钮控制台打印出来的一部分信息

二、获取到dom节点

通过event.target即可获得。

原页面

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件'
        }
    }

    getEventDOM = (event) => {
        console.log(event.target)
        event.target.style.background = 'red'
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <button onClick={this.getEventDOM}>获取DOM节点</button>
            </div>
        )
    }
}

按了获取DOM节点按钮后
控制台输出信息

三、获取DOM对象上的属性

通过event.target.getAttribute()即可获得。

import React, {Component} from 'react'
import '../assets/css/index.css'

export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: '我是一个Test组件'
        }
    }
    getEventDOMAttr = (event) => {
        console.log(event.target.getAttribute('data-test'))
    }
    render() {
        return (
            <div>
                <h2>{this.state.msg}</h2>
                <button data-test="213213" onClick={this.getEventDOMAttr}>获取DOM节点属性test</button>
            </div>
        )
    }
}

页面
点击按钮后控制台输出