標籤:htm let sel 屬性 儲存 就會 action 箭頭函數 delete
一、什麼是綁定事件
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 方式1handleChange(){ //xxx}<input onChange={ () => this.handleChange()} />//2.2 方式2handleChange = () => { //xxx}<input onChange={this.handleChange} />/** 3. 屬性內綁定*/handleChange(){ //xxx}<input onChange={this.handleChange.bind(this)} />
如果想要詳細地瞭解這幾種React綁定事件的區別及如何選擇,可以看我這篇文章:
《每日品質NPM包事件綁定_bindme(詳解React的this)》
二、動態化
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的事件Binder 方法。雖然在普通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}/>
React綁定事件動態化的實現方法