React綁定事件動態化的實現方法

1、什麼是綁定事件

1.1 事件

我這裏指的事件通常指的是React自帶的觸發事件,我這裏先簡單舉例幾個

onClick         //鼠標點擊
onMouseEnter    //鼠標滑進
onMouseLeave    //鼠標滑出

1.2 綁定事件

通常有三種綁定事件的方法:

/*
* 1. constructor函數裏統一bind
*/
constructor(arg){
    super(arg)
    
    this.handleChange = this.handleChange.bind(this)
    //...
}

<input onChange={this.handleChange} />

/*
* 2. 箭頭函數
*/
//2.1 方式1
handleChange(){
    //xxx
}

<input onChange={ () => this.handleChange()} />

//2.2 方式2
handleChange = () => {
    //xxx
}

<input onChange={this.handleChange} />

/*
* 3. 屬性內綁定
*/
handleChange(){
    //xxx
}

<input onChange={this.handleChange.bind(this)} />

若是想要詳細地瞭解這幾種React綁定事件的區別及如何選擇,能夠看我這篇文章:
《每日質量NPM包事件綁定_bindme(詳解React的this)》

2、動態化

2.1 什麼是動態化

動態化在我理解裏就是具備可控性,能節省代碼空間.好比ES6經常使用字符串模板就是實現動態化的一種方式

舉個栗子:
若是我想輸出3個數據('mock1', 'mock2', 'mock3').

console.log('mock1')
console.log('mock2')
console.log('mock3')

let arr = ['mock1', 'mock2', 'mock3']

arr.map( item => {
    console.log(`動態輸出${item}`)
})

固然,這個例子動態化的做用並不明顯,咱們直接看react事件動態化例子吧

2.2 React事件動態化

前面介紹了react的事件綁定方法。雖然在普通react語法中,咱們不常常涉及到事件動態化,可是像一個渲染類的組件中(例如antd table等等),就會常常使用的了

仍是栗子: 我要擁有三個除了綁定事件之外其他如出一轍的button。分別綁定save、restart、delete事件.咱們通常會這麼寫

<button onClick={ () => this.handleSave() }>保存</button>

<button onClick={ () => this.handleRestart() }>重啓</button>

<button onClick={ () => this.handleDelete() }>刪除</button>

這麼寫固然沒問題,可是一來代碼比較多,不美觀.二來遇到antd table這類render屬性的,寫這麼多容易混亂,因此休整一下,以下:

const action = {
  'Save': '保存',
  'Stop': '中止實例',
  'Restart': '重啓實例'
}

{
    Object.keys(action).map( item => (
        <button key={item} onClick={ () => this[`handle${item}`]() } >{action[item]}</button>
    ))
}

界面醜是醜了一點,可是很是實用呀！

好比antd的table

let columns = [{
  title: '操做',
  dataIndex: 'action',
  key: 'action',
  render: action => (
    <span>
      {
        Object.keys(action).map( item => <span 
          key={item} 
          onClick={ () => this[`handle${item}`]() }>{action[item]}</span>)
      }
    </span>
  )
}]

let datalist = [action: {
  'Save': '保存',
  'Stop': '中止實例',
  'Restart': '重啓實例'
}]

<Table
  columns={columns}
  dataSource={datalist}
/>