Detailed explanation of the four ways to bind events to this in React

This article mainly introduces the four ways of binding this event in react in detail. Now I will share it with you and give you a reference.

In the react component, the context of each method will point to the instance of the component, that is, this will be automatically bound to the current component, and react will also cache this reference to achieve the maximum CPU and memory capacity. change. When using es6 class or pure function, this automatic binding no longer exists. We need to manually implement the binding of this

React event binding is similar to DOM event binding, the difference is as follows:

1. React events are named in camel case, and DOM events are named in lowercase

2. Through jsx, pass a function as the event handler instead of a string.

3. React events cannot prevent default events by returning false. You need to explicitly call preventDefault()

The following example:

<a href="#" onclick="console.log(&#39;The link was clicked.&#39;); return false">
Click me
</a>

class ActionLink extends React.Component {
constructor(props) {
super(props);
}

handleClick(e) {
e.preventDefault();
console.log(&#39;The link was clicked.&#39;);
}

render() {
return (
<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
);
}

}

ps: There is no method in the React component class This is bound to the component instance by default and needs to be bound manually.

The following are several binding methods:

bind method

Direct binding is bind(this) Binding, but the problem caused by this is that each rendering will rebind the bind;

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del.bind(this)}></span>
   </p>
  );
 }
}

Binding within the constructor

Bind this in the constructor. The advantage is that it only needs to be bound once, avoiding rebinding every time it is rendered. There is no need to bind again when the function is reused elsewhere.

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
  this.del=this.del.bind(this)
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del}></span>
   </p>
  );
 }
}

::Cannot pass parameters

If you do not pass parameters, you can also use double colon

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={::this.del}></span>
   </p>
  );
 }
}

Arrow function binding

The arrow function is not only the 'syntactic sugar' of the function, it also automatically binds this that defines the scope of this function, because we don't need to bind them anymore:

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {

  };

 }

 del=()=>{
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del}></span>
   </p>
  );
 }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Vue implementation of uploading images to the database and displaying them on the page function example

After solving the problem using vue.js routing Invalid problem

How to perfectly parse data in js

The above is the detailed content of Detailed explanation of the four ways to bind events to this in React. For more information, please follow other related articles on the PHP Chinese website!