React类组件中为何需用this.handleClick而非直接使用handleClick？

Great question! This boils down to how JavaScript class scope and property access work—let’s break it down clearly.

First, the Core JavaScript Rule #

In JavaScript classes, methods you define (like handleClick in your example) are not "free variables" available anywhere inside the class. Instead, they’re properties of the class instance. To access an instance property or method from within the class, you must use the this keyword, which refers to the current instance of the class.

If you skip this and just write handleClick, JavaScript will look for a variable named handleClick in the local scope of the render function (where you’re setting the onClick prop). Since you didn’t declare a variable called handleClick inside render, it throws the 'handleClick' is not defined no-undef error.

Let’s Use a Non-React Analogy #

To make this concrete, think of a plain JavaScript class without React:

class Dog {
  bark() {
    console.log("Woof!");
  }
  makeNoise() {
    // This works: `this` points to the Dog instance, so we access its bark method
    this.bark();
    
    // This would FAIL: `bark` isn't a variable in makeNoise's local scope
    // bark();
  }
}

const myDog = new Dog();
myDog.makeNoise(); // Logs "Woof!"

Same logic applies to your React component—handleClick is a method attached to your First component instance, so you need this to reach it.

How This Differs from Function Components #

If you’re used to React function components, you might wonder why you can just write onClick={handleClick} there. That’s because in function components, the handler function is defined directly in the component’s top-level scope, so it’s accessible as a local variable without needing this.

Back to Your React Code #

In your component:

class First extends React.Component{
  handleClick(){
    alert('handle click');
  }
  render(){
    return <div>
      {/* Works: `this` points to the First instance, finds handleClick */}
      <button onClick={this.handleClick}>click</button>
    </div>;
  }
}

When you pass this.handleClick to onClick, React stores a reference to the instance’s handleClick method. When the button is clicked, it calls that method correctly.

One Quick Side Note #

While we’re on the topic: you might later run into issues where this is undefined inside handleClick when it’s called. That’s a separate problem about function binding, but it’s related to how this works in JavaScript. For now, the key takeaway is that you need this to access the method in the first place.

内容的提问来源于stack exchange，提问作者Sanjay