【React】React Event事件处理

React事件处理

<button
  className = {styles.button}
  onClick = {(e) => {
    this.setState({ isOpen: !this.state.isOpen });
  }}
>
  购物车2件
</button> 

给any添加自动映射

tsconfig.json

{
  "compilerOptions": {
     "noImplicitAny": false
   }
}

添加事件处理函数

(1) 箭头函数

handleClick = （e: React.MouseEvent<HTMLButtonElement, MoueEvent>） => {
  this.setState({ isOpen: !this.state.isOpen })
}

render() 
  return (
 	<button
  		className = {styles.button}
  		onClick = {this.handleClick}
	>
  	购物车2件
	</button> 
)

(2) 普通函数绑定this

（3）

handleClick = (e:React.MouseEvent<HTMLButtonElement, MouseEvent>){
  e.target // target描述的是事件发生的元素
  e.currentTarget // currentTarget描述的是事件处理绑定的元素
  this.setState({ isOpen: !this.state.isOpen })
}

handleClick = (e:React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  if((e.target as HTMLElement).nodeName === "SPAN") {
    this.setState({ isOpen: !this.state.isOpen });
  }
}

标题react添加icon

npm install react-icons