React绑定事件动态化的实现方法

<font color="green"><h3>1、什么是绑定事件</h3></font>

<font color="#9a4141"><h4>1.1 事件</h4></font> 我这里指的事件通常指的是React自带的触发事件,我这里先简单举例几个

onClick         //鼠标点击
onMouseEnter    //鼠标滑进
onMouseLeave    //鼠标滑出

<font color="#9a4141"><h4>1.2 绑定事件</h4></font> 通常有三种绑定事件的方法:

/*
* 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绑定事件的区别及如何选择,能够看我这篇文章:
<a href="https://www.cnblogs.com/soyxiaobi/p/9737234.html" target="_blank">《每日质量NPM包事件绑定_bindme(详解React的this)》</a>

<font color="green"><h3>2、动态化</h3></font>

<font color="#9a4141"><h4>2.1 什么是动态化</h4></font>

动态化在我理解里就是具备可控性,能节省代码空间.好比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事件动态化例子吧

<font color="#9a4141"><h4>2.2 React事件动态化</h4></font>

前面介绍了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}
/>