react event事件

最新推荐文章于 2024-05-03 22:26:54 发布

原创最新推荐文章于 2024-05-03 22:26:54 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#target #currentTarget #react

前端专栏收录该内容

45 篇文章

订阅专栏

本文通过一个React组件示例，展示了在事件处理中`event.target`和`event.currentTarget`的区别。当点击“购物车(2件)”按钮时，`event.target`指的是实际被点击的元素（这里是内部的文本节点），而`event.currentTarget`则是事件处理函数绑定的元素（即按钮元素本身）。理解这两个属性的区别对于精确操控DOM和实现交互至关重要。

event.target 事件发生的元素

event.currentTarget 事件处理绑定的元素

示例：

import React from 'react';
import style from './ShoppingCart.module.css';
import { FiShoppingCart } from "react-icons/fi";
interface Props{

}
interface State{
    isOpen : boolean;
}
class ShoppingCart extends React.Component<Props, State>{
    constructor(props: Props){
        super(props);
        this.state = {
            isOpen: false
        }
    }

    handleClick=(e)=>{
        console.log("e.target ", e.target);
        console.log("e.currentTarget ", e.currentTarget);
        
        this.setState({isOpen: !this.state.isOpen});
    }

    render(){
        return <div className={style.cartContainer}>
            <button className={style.button} 
            onClick={this.handleClick}
            >
                <FiShoppingCart/><span>购物车(2件)</span>
            </button>
            <div className={style.cartDropDown}
            style={{display: this.state.isOpen ? "block" : "none"}}
            >
                <ul>
                    <li>robot 1</li>
                    <li>robot 2</li>
                </ul>
            </div>
        </div>
    }
}
export default ShoppingCart;

从代码中可以看到给button绑定了一个click事件，在事件中我们打印下e.target和e.currentTarget。

页面是这样的