Detailed explanation of four ways to bind events to this in react_javascript skills

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

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

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

2. With 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('The link was clicked.');
}
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 'syntax 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>
  );
 }
}

Related recommendations:

A brief introduction to this and self in php

Four types of this value modes in JS

# How to use this in ##html tags

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