React 18 系统精讲（四）react event事件处理

一.事件处理：

可在类中定义函数，然后在render(){}中调用，定义函数的方式有两种。

方式一：

 注：使用此方法必须使用bind()来确保this的指向，加上这一句代码this.handleClick = this.handleClick.bind(this) ; 意思是让后续handleClick函数中的this指向class，如果不加这一句代码的话，handleClick函数中的this会指向handleClick，后续点击就会报错

方式二：使用箭头函数 

以上两种方式效果相同，推荐使用箭头函数，这样就不需要使用bind()来提前保证this指向了，代码更简洁！

补充：

1.以上两种方式的参数最好使用泛型规定好类型 ，即规定是鼠标点击类型：

e: React.MouseEvent<HTMLButtonElement, MouseEvent>

2. 传入参数e之后可使用：

      e.target   指向当前点击的元素

      e.currentTarget   指向当前handleClick所在的元素

延伸：可以通过判断e.target的类型，之后在用nodeName判断元素名称是否是SPAN，如果是的话可以执行切换state状态，代码案例如下：

handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        console.log("e.target",e.target)  //指向当前点击的元素
        console.log("e.currentTarget",e.currentTarget) //指向当前handleClick所在的元素
        if ( (e.target as HTMLElement).nodeName === "SPAN" ) {
            this.setState({ isOpen: !this.state.isOpen });
        } 
}

 e.target as HTMLElement是来判断 e.target的类型

二.添加购物车icons

1.cd进入项目目录后运行：

npm  run  react-icons

2.在需要的组件中import：

import { TfiShoppingCart } from "react-icons/tfi";

注：tfi是可以改变的，改变后对应的TfiShoppingCart中的Tfi也需要改变

3. 之后直接使用<TfiShoppingCart/>就能带出来对应的icon，如下图：