JSX繫結事件

語法：onclick = {this.函式名}

onClick = {this.yourEvent}

事件型別

onClick onChange onSubmit

繫結this方式

第一種：onClick = {this.yourEvent} 需要在建構函式中繫結this
第二種：onClick = {this.yourEvent.bind(this)}
第三種：onClick = {() => this.yourEvent()}
第四種：屬性初始化

clickEvent = () => {事件邏輯}
複製程式碼

優缺點：

第一種推薦，一般都是用這種方式
第二種每次render，都會重新生產一個函式
第三種每次render,都會執行一遍方法
第四種 還是實驗性的

事件傳遞引數方式

第一種：onClick = {this.yourEvent.bind(this)}
第二種：onClick = {() => this.yourEvent()}
第三種：通過event.target屬性來獲取當前DOM物件，然後獲取屬性值得方法

例項：

import React from 'react'

class BindThisDemo extends React.Component{
  constructor(props){
    super(props);
    this.bindClick = this.bindClick.bind(this);
  }
  bindClick(){
    alert('我是在建構函式中繫結this')
  }
  bindClick2(){
    alert('我是在繫結事件中繫結this')
  }
  bindClick3(){
    alert('我是在繫結事件中 用箭頭函式的特性繫結this')
  }
  bindClick4 = () => {
    alert('我是利用屬性初始化 來繫結this')
  }
  bindClick5(value1,value2){
    alert(value1+value2)
  }
  bindClick6(value){
    alert(value)
  }
  render(){
    return(
      <div>
        <button onClick = {this.bindClick}>demo1</button>
        <button onClick = {this.bindClick2.bind(this)}>demo2</button>
        <button onClick = {() => this.bindClick3()}>demo3</button>
        <button onClick = {this.bindClick4}>demo4</button>
         <button onClick = {this.bindClick5.bind(this,'引數','來自bind')}>demo5</button>
        <button onClick = {() => this.bindClick6('引數來自箭頭函式')}>demo6</button>
      </div>
    )
  }
}

export default BindThisDemo;

複製程式碼