Several ways to bind react events to this-JS Tutorial-php.cn

Several ways to bind react events to this

php中世界最好的语言

Release： 2018-03-17 09:47:33

Original

1879 people have browsed it

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!