DDR爱好者之家

详解react关于事件绑定this的四种方式
站长资源 2024/11/26 佚名
57 1538
DDR爱好者之家 Design By 杰米

在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绑定，使用那种各自的习惯；希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米