详解react关于事件绑定this的四种方式
更新时间：2018年03月09日 09:38:42 作者：仅此而已
这篇文章主要介绍了详解react关于事件绑定this的四种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在react组件中，每个方法的上下文都会指向该组件的实例，即自动绑定this为当前组件,而且react还会对这种引用进行缓存，以达到cpu和内存的最大化。在使用了es6 class或者纯函数时，这种自动绑定就不复存在了，我们需要手动实现this的绑定
React事件绑定类似于DOM事件绑定，区别如下：
1.React事件的用驼峰法命名，DOM事件事件命名是小写
2.通过jsx，传递一个函数作为event handler，而不是一个字符串。
3.React事件不能通过返回false来阻止默认事件，需要显式调用preventDefault()
如下实例：
<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:React组件类的方法没有默认绑定this到组件实例，需要手动绑定。
以下是几种绑定的方法:
bind方法
直接绑定是bind（this）来绑定，但是这样带来的问题是每一次渲染是都会重新绑定一次bind；
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
del(){
console.log('del')
}
render() {
return (
<div className="home">
<span onClick={this.del.bind(this)}></span>
</div>
);
}
}
构造函数内绑定
在构造函数 constructor 内绑定this，好处是仅需要绑定一次，避免每次渲染时都要重新绑定，函数在别处复用时也无需再次绑定
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
this.del=this.del.bind(this)
}
del(){
console.log('del')
}
render() {
return (
<div className="home">
<span onClick={this.del}></span>
</div>
);
}
}
::不能传参
如果不传参数使用双冒号也是可以
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
del(){
console.log('del')
}
render() {
return (
<div className="home">
<span onClick={::this.del}></span>
</div>
);
}
}
箭头函数绑定
箭头函数不仅是函数的'语法糖'，它还自动绑定了定义此函数作用域的this，因为我们不需要再对它们进行bind方法：
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
del=()=>{
console.log('del')
}
render() {
return (
<div className="home">
<span onClick={this.del}></span>
</div>
);
}
}
以上几种方法都可以实现this绑定，使用那种各自的习惯；希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在这篇文章中,我将带着大家一起探究React中使用dnd-kit实现拖曳排序功能,由于前阵子需要在开发 Picals 的时候,需要实现一些拖动排序的功能,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-06-06
错误边界是一种React组件,这种组件可以捕获发生在其子组件树任何位置的JavaScript错误,并打印这些错误,同时展示降级UI,而并不会渲染那些发生崩溃的子组件树2022-12-12
解决React报错Cannot find namespace context
这篇文章主要为大家介绍了React报错Cannot find namespace context分析解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了React手写redux过程，目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了React之使用useState异步刷新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，本文给大家分享React中axios模块的使用方法，感兴趣的朋友一起看看吧2022-03-03
这篇文章主要介绍了React 模块联邦多模块项目实战详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了React Native从类组件到函数组件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-03-03
在React中，路由是一套映射规则，是URL路径与组件的对应关系。使用React路由，就是配置路径和组件的对应关系，这篇文章主要介绍了路由react-router-dom的使用,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了react实现数据监听方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
最新评论