The implementation method of react binding event dynamic

I. What is a binding event

1.1 Events
The events I refer to here generally refer to react's own triggering events, and I'll give you a few simple examples here.

onClick //mouse click
onMouseEnter //mouse slides in
onMouseLeave //mouse slides out

1.2 Binding Events
There are typically three ways to bind events:

/*
* 1. Unified bind in the constructor function
*/
Constructor(arg){
     Super(arg)
    
     this.handleChange = this.handleChange.bind(this)
     //...
}

<input onChange={this.handleChange} />

/*
* 2. Arrow function
*/
//2.1 mode 1
handleChange(){
     //xxx
}

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

//2.2 mode 2
handleChange = () => {
     //xxx
}

<input onChange={this.handleChange} />

/*
* 3. Binding within properties
*/
handleChange(){
     //xxx
}

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

If you want to learn more about the differences between these kinds of react binding events and how to choose them, you can read this article:
"Daily quality NPM Package Event binding _bindme (detailed react this)"

Second, dynamic

2.1 What is dynamic

The dynamic is controllable in my understanding and can save code space. For example, ES6 commonly used string template is a way to realize the dynamic

Give me a chestnut:
If I want to output 3 data (' Mock1 ', ' mock2 ', ' Mock3 ').

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

Let arr = [‘mock1‘, ‘mock2‘, ‘mock3‘]

Arr.map( item => {
     Console.log(`dynamic output ${item}`)
})

Of course, this example of the dynamic effect is not obvious, we directly look at the React event dynamic example of it

2.2 React Event Dynamics

The event binding method for react is described earlier. Although we do not often involve event dynamics in the normal react syntax, it is often used as a component of a rendering class (for exampleantd table, etc.).

or chestnut: I want to have three identical buttons except for the binding event. Bindingsave,restartevents, respectively. That's whatdeletewe're going to write.

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

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

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

Of course, this is fine, but the code is more, not beautiful.antd tableand second encounter this kind of render attribute, write so much easy confusion, so take a break, as follows:

Const action = {
   ‘Save’: ‘Save’,
   ‘Stop’: ‘Stop ’,
   ‘Restart’: ‘restart instance’
}

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

The interface ugly is a little ugly, but very practical!

Like Antd's table.

Let columns = [{
   Title: ‘Operation’,
   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’: ‘Save’,
   ‘Stop’: ‘Stop ’,
   ‘Restart’: ‘restart instance’
}]

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

The implementation method of react binding event dynamic