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。
页面是这样的
F12打开审查元素,点击"购物车(2件) "
点击""
对比我们就能发现target和currentTarget的区别。