Preface

Because of the flexibility of JS, we actually have many ways to bind events in React. However, there are many common event bindings that are not efficient. So I want to introduce you to the correct posture of the React binding event.

Two common types of error binding events

class ErrorExample1 extends Component {

    balabala(e) {console.log(e)}
    
    render() {
        const { text } = this.state;
        
        return (
          <Wrapper>
            {text}
            <Balabala onClick={(e) => this.balabala(e)}></Balabala>
          </Wrapper>
        )
    }
}

class ErrorExample2 extends Component {
    balabala(e) {console.log(e)}
    
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.balabala.bind(this)}></Balabala>
          </Wrapper>
        )
    }
}

These are the two most common React binding event codes, but why is it wrong?

Every time your text changes, rerender occurs. As long as the component re-render, it will recreate the event function and bind the event. The overhead of this process is a great waste. Equivalently, every rerender creates an event function.

It's said to be Best Practice.

class Balabala extends Component {
    constructor(p) {
        suprt(p);
        this.balabala = this.balabala.bind(this);
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.balabala}></Balabala>
          </Wrapper>
        )
    }
}

However, my preferred posture

class Balabala extends Component {
    constructor(p) {
        suprt(p);
    }
    //Wake up and remember to think of me = (e) =>.{
        alert('I miss you!');
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.Wake up and remember missing me}></Balabala>
          </Wrapper>
        )
    }
}

Use the arrow function to bind this for us. Avoid a bunch of variables in the constructor. Reduce keyboard tapping and prolong life.

Of course, some people will ask, how can such writing be transmitted? People used to write like this.

class Slag man extends Component {
    constructor(p) {
        suprt(p);
    }
    //Wake up and remember to think of me = (e, text) =>.{
        alert(text); // Let's go, alert, slag man
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.Wake up and remember missing me.bind(e, 'Come on, Scrap Man')}></Balabala>
          </Wrapper>
        )
    }
}   

But in fact, we can pass on the reference in this way, more concise and concise.

class Slag man extends Component {
    constructor(p) {
        suprt(p);
    }
    //Wake up and remember to think of me = (text) => (event) =>.{
        alert(text); // I like your scum, too, because it's you.
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.Wake up and remember missing me( 'I like your scum, too, because it's you.')}></Balabala>
          </Wrapper>
        )
    }
}

Dynamic binding

Based on this, we can also modify multiple input values for the same event to optimize the event.

class ChangeMyName extends Component {
  //Modify the name of the slag man = name = >{
    if (!this.handlers[name]) {
      this.handlers[name] = event => {
        this.setState({ [name]: event.target.value });
      };
    }
    return this.handlers[name];  
  }
  
  render() {
    return (
        <>
          <input onChange={this.Modify the name of Mr. Zhan('Man Shen 1')}/>
          <input onChange={this.Modify the name of Mr. Zhan('Cinder male 2')}/>
        </>
    )
  }
}

By the way, heresy! (I just don't like it personally)

import autoBind from 'react-autobind';

class Balabala extends Component {
    constructor() {
       autoBind(this);
    }
    //Wake up and remember to miss me (e){
        alert('I miss you!');
    }
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={this.Wake up and remember missing me}></Balabala>
          </Wrapper>
        )
    }
}

import { BindAll } from 'lodash-decorators';

@BindAll()
class Bbb extends Component {}

// This is equivalent to bind.
class Bbb extends Component {
    balabala(){}
    render() {
        const { text } = this.state;
        return (
          <Wrapper>
            {text}
            <Balabala onClick={::this.balabala}></Balabala>
          </Wrapper>
        )
    }
}

Basically, they are the same as each other, so we won't introduce them too much. Seeing this, you also know how to bind events.