时间戳

首页 > 解决方案 > 在handleIncrement 方法中，“this”指的是未定义

reactjs - 在handleIncrement 方法中，“this”指的是未定义

问题描述

在handleIncrement()我将“this”记录到控制台的方法中，它显示为未定义。
而getBadgeclasses()这也是同一个类的方法，其中 this 引用了父类。
为什么会这样？是因为该handleIncrement方法是由 onClick 属性调用的还是有其他逻辑？

import React, { Component } from "react";

class Counter extends Component {
  state = { count: 2, tags: [] };

  handleIncrement() {
    console.log(this);
  }

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={this.handleIncrement}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }
  getBadgeClasses() {
    let classes = "badge m-2 bg-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;

    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

标签： reactjs

解决方案

由于没有将方法自动绑定到自身，

你有 3 个解决方案（也许更多）。

第一种方法是将方法绑定到自身。在构造函数中创建以下行：

this.handleIncrement= this.handleIncrement.bind(this);

第二种方法将 onClick 重构如下：

onClick={()=>this.handleIncrement}

第三种方法将函数更改为箭头函数

handleIncrement = (e) => {...}

然后将按钮也更改为：

onClick={this.handleIncrement.bind(this)}

此链接将被完整使用： React & Autobinding

推荐阅读