React繫結事件動態化的實現方法
阿新 • • 發佈:2018-12-16
一、什麼是繫結事件
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)} />
二、動態化
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}
/>