Several ways to bind react events to this

This time I will bring you several ways to bind react events to this. What are the precautions for binding react events to this? The following is a practical case, let's take a look.

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('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 bind will be re-binded every time it is rendered;

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>
  );
 }
}

ConstructorInner binding

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 use double colons

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

function scope, because we don't need to Bind them:

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>
  );
 }
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

JS generates QR code

JS implements random switching of WeChat ID

String.prototype.formatHow to use string concatenation

The above is the detailed content of Several ways to bind react events to this. For more information, please follow other related articles on the PHP Chinese website!