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

來源:互聯網
上載者:User

標籤: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。分別綁定saverestartdelete事件.我們一般會這麼寫

<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綁定事件動態化的實現方法

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.