event事件处理

箭头函数解决 this指向

推荐使用箭头函数来解决 this指向问题，代码更简洁
少用 bind，因为bind每次初始化都要 bind一次

// tsx class 类组件
import React from 'react'
interface Props {
}
// state 组件内的数据，自己的状态
interface State {
  visible: boolean
}
/**
 * 在 UI render前获取一些数据
 * static getSnapshotBeforeUpdate()
 * 定义类型 1 type，2 interface
 */
class CardModel extends React.component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      visible: false
    }
  }
  // 箭头函数 this默认指向父级
  onClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
      this.setState(state => ({visible: !state.visible}))
  }
  render() {
    const { visible } = this.state
    const style = {display: visible ? 'block' : 'none' }
    return (
      <div style={style}>
        <button onClick={this.onClick}>确定</button>
      </div>
    )
  }
}
export default CardModel

bind处理 this指向

// tsx class 类组件
import React from 'react'
interface Props {
}
// state 组件内的数据，自己的状态
interface State {
  visible: boolean
}
/**
 * 在 UI render前获取一些数据
 * static getSnapshotBeforeUpdate()
 * 定义类型 1 type，2 interface
 */
class CardModel extends React.component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      visible: false
    }
    this.onClick = this.onClick.bind(this)
  }
  onClick(e: React.MouseEvent<HTMLElement, MouseEvent>) {
      this.setState(state => ({visible: !state.visible}))
  }
  render() {
    const { visible } = this.state
    const style = {display: visible ? 'block' : 'none' }
    return (
      <div style={style}>
        <button onClick={this.onClick}>确定</button>
      </div>
    )
  }
}
export default CardModel

事件优化

以下2个方法：用户函数式组件的优化，不能用户 class类组件

1. useCallback()
2. useMemo()

// jsx
const onClick = useCallback(() => {
    setValue(200)
})
// tsx
onClick:(e: React.MouseEvent<HTMLElement, MouseEvent>) {
      this.setState(state => ({visible: !state.visible}))
  }

ev.target和 ev.currentTarget

1. ev.target描述的是 事件发生的元素
   1. 点击那个元素触发的事件
   2. 比如：一个元素有多个子元素，每次点击 ev.target可能会不一样；但是 ev.currentTarget都是一样的
2. ev.currentTarget是事件处理绑定的元素
3. ev.nativeEvent来访问 HTML原生的事件
4. e.target as HTMLElement target的类型转换，获取 DOM节点类型

   onClick(e: React.MouseEvent<HTMLElement, MouseEvent>) {
   // 获取 target元素的方法
   const node = (e.target as HTMLElement).nodeName === 'SPAN'
   if(!node) return
   this.setState(state => ({visible: !state.visible}))
   }

自愿付费

对知识的一份尊重，为价值买单，自愿付费
有价值的经验分享，让小伙伴看完有所收获，放个公平的二维码
本文标价60元，如果你能够将本文分享的干活认真去执行，你最少可以获得10倍以上的 react经验
欢迎你和我一起玩，你觉得这篇文章价值多少，就自愿付费到支付宝