Web Front-end
JS Tutorial
Detailed explanation of the four ways to bind events to this in React
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('The link was clicked.'); 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 '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:
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange?
Apr 26, 2024 am 09:40 AM
MetaMask (also called Little Fox Wallet in Chinese) is a free and well-received encryption wallet software. Currently, BTCC supports binding to the MetaMask wallet. After binding, you can use the MetaMask wallet to quickly log in, store value, buy coins, etc., and you can also get 20 USDT trial bonus for the first time binding. In the BTCCMetaMask wallet tutorial, we will introduce in detail how to register and use MetaMask, and how to bind and use the Little Fox wallet in BTCC. What is MetaMask wallet? With over 30 million users, MetaMask Little Fox Wallet is one of the most popular cryptocurrency wallets today. It is free to use and can be installed on the network as an extension
How to bind a sub-account on Xiaohongshu? How does it check whether the account is normal?
Mar 21, 2024 pm 10:11 PM
In today's era of information explosion, the construction of personal brand and corporate image has become increasingly important. As the leading fashion life sharing platform in China, Xiaohongshu has attracted a large number of user attention and participation. For those users who want to expand their influence and improve the efficiency of content dissemination, binding sub-accounts has become an effective means. So, how does Xiaohongshu bind a sub-account? How to check whether the account is normal? This article will answer these questions for you in detail. 1. How to bind a sub-account on Xiaohongshu? 1. Log in to your main account: First, you need to log in to your Xiaohongshu main account. 2. Open the settings menu: click "Me" in the upper right corner, and then select "Settings". 3. Enter account management: In the settings menu, find the "Account Management" or "Account Assistant" option and click
Steps and methods to bind Douyin in Toutiao
Mar 22, 2024 pm 05:56 PM
1. Open Toutiao. 2. Click My in the lower right corner. 3. Click [System Settings]. 4. Click [Account and Privacy Settings]. 5. Click the button on the right side of [Douyin] to bind Douyin.
How to bind the Cainiao app to Pinduoduo? How to add the Cainiao Wrap to Pinduoduo platform?
Mar 19, 2024 pm 02:30 PM
The Cainiao app is a platform that can provide you with various logistics information. The functions here are very powerful and easy to use. If you have any logistics-related problems, they can be solved here. Anyway, it can bring you a The one-stop service can solve everything in time. Checking the express delivery, picking up the express delivery, sending the express delivery, etc. are all without any problems. We have cooperated with various platforms and all the information can be queried. However, sometimes It will happen that the goods purchased on Pinduoduo cannot display the logistics information. In fact, you need to manually bind Pinduoduo to achieve this. The specific methods have been sorted out below, and everyone can take a look. . How to bind Cainiao to Pinduoduo account: 1. Open Cainiao APP and go to the main page
PHP, Vue and React: How to choose the most suitable front-end framework?
Mar 15, 2024 pm 05:48 PM
PHP, Vue and React: How to choose the most suitable front-end framework? With the continuous development of Internet technology, front-end frameworks play a vital role in Web development. PHP, Vue and React are three representative front-end frameworks, each with its own unique characteristics and advantages. When choosing which front-end framework to use, developers need to make an informed decision based on project needs, team skills, and personal preferences. This article will compare the characteristics and uses of the three front-end frameworks PHP, Vue and React.
Integration of Java framework and front-end React framework
Jun 01, 2024 pm 03:16 PM
Integration of Java framework and React framework: Steps: Set up the back-end Java framework. Create project structure. Configure build tools. Create React applications. Write REST API endpoints. Configure the communication mechanism. Practical case (SpringBoot+React): Java code: Define RESTfulAPI controller. React code: Get and display the data returned by the API.
How to bind the Cainiao APP to Pinduoduo How to bind the Cainiao APP to Pinduoduo
Mar 19, 2024 pm 05:16 PM
Do you know how to bind Pinduoduo when using Cainiao Wrap? The official version of Cainiao Wrap App does not automatically synchronize some Pinduoduo’s logistics information on this platform. All we need to do is You can copy the order number or check your mobile phone to see if there is any express delivery information. Of course, these all need to be completed manually. If you want to know more, come and take a look with the editor. How to bind the Cainiao APP to Pinduoduo 1. Open the Cainiao APP and click "Package Guide" in the upper left corner of the main page. 2. In the interface, there are many shopping websites, and accounts can be bound. 3. Click to import other e-commerce platforms. 4. User authorization: Click Pinduoduo to go to the interface
How to bind the Xiaomi car app to the charging pile device
Apr 01, 2024 pm 06:52 PM
The latest Mi su7 model car launched by Xiaomi has dominated various hot search lists. Many users who happen to want to buy a car have chosen Xiaomi su7 model car for purchase. So how do you use your Xiaomi car app to bind the car after picking up the car? If you decide to use a home charging pile for charging, this tutorial guide will give you a detailed introduction, I hope it can help you. First, we open the Xiaomi mobile app, click the My button in the lower right corner, and then in the My interface, you can see the option of home charging pile. After entering the page to bind the charging pile, click the scan code button below and scan the QR code on the charging pile. The QR code can be used to bind the charging pile to the app.
