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:

4b9fb64e28bfa25ce78ce203c03210ee
Click me
5db79b134e9f6b82c0b36e0489ee08ed
class ActionLink extends React.Component {
constructor(props) {
super(props);
}
handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
render() {
return (
ce9b621fb6ec54951e7c0b38768a414bClick Me...5db79b134e9f6b82c0b36e0489ee08ed
);
}
}

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 (
   09d51344e61201747f3f0f261639e806
    c157f1b0f1442cd3850bd9da57d4d18e54bdf357c58b8a65c66d7c19c8e4d114
   94b3e26ee717c64999d7867364b1b4a3
  );
 }
}

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!