事件

class 组件

1、函数声明需要改变 this 指向，不然函数内部访问不到 this

• onClick 是 react 的合成事件，所以 onClick 其实是一个中间变量，把函数指向这个中间变量，内部 this 会丢失，最终指向 window

class On extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this) // 这种写法只绑定一次，性能更好
    }
    handleClick() {
        // 不用 bind，会打印 Window/undefined
        // 使用 bind，打印 class On
        console.log(this)
    }
    render() {
        return (
            {/*
            	不推荐这种写法，因为会造成每点击一次就改变一次this指向，浪费性能
            	<div onClick={this.changeName.bind(this)}>{this.state.name}</div> 
            */}
            <button onClick={this.handleClick}> console </button>
        )
    }
}

2、箭头函数则无需使用 bind

// 箭头函数的 this 指向上级作用域
handleClick = () => { console.log('hello world kingmusi') }

函数组件

变量都是通过 arguments 和内部定义获取的，也就无所谓 this 是什么了

const Demo = ({ data }) => {
  function handleClick() {
      console.log(data)
  }
  // const handleClick = () => { console.log('hello world kingmusi') }
  return (
    <button onClick={this.handleClick}> console </button>
  )
}

参数

1、只传 event

// 什么都不传的时候，函数第一个参数为 event
<div onClick={ this.handleClick }></div>

handleClick(e){
    console.log(e.target) // div dom 元素
}

2、传其他参数

<div onClick={ (e) => {this.handleClick(id，e)} }></div>

handleClick(id, e){}