React this绑定重构疑问：能否简化类组件方法绑定代码？

I wrote the following React class component code:

class BottomPanel extends React.Component<Props, {}> {
  constructor(props) {
    super(props);
    this.dropDownUpdate = this.dropDownUpdate.bind(this);
  }
  dropDownUpdate = e => this.setState({ dropDownValue: e.currentTarget.textContent });
}

I have a technical question: Can I simplify the line this.dropDownUpdate = this.dropDownUpdate.bind(this); in the constructor to this.dropDownUpdate = this.dropDownUpdate;? If yes, why? If not, why not? I've seen someone write it this way, but I'm not sure if it applies to my code.

Short Answer #

No, you can't simplify it that way—but actually, you don't even need that line at all in your current code. Let me break this down clearly.

Detailed Explanation #

First, let's look at how you've defined dropDownUpdate: you're using a class field arrow function (dropDownUpdate = e => ...). Arrow functions automatically inherit the this context from the class instance when they're initialized. That means they don't need any manual .bind(this) calls to work correctly as event handlers.

Now, let's unpack what your original constructor line does:

• this.dropDownUpdate.bind(this) creates a brand new function with this bound to the component instance.
• But since your dropDownUpdate is already an arrow function, it already has the correct this context built in. Assigning this.dropDownUpdate = this.dropDownUpdate.bind(this); is redundant here—it's just making a bound copy of a function that's already bound.

If you tried changing that line to this.dropDownUpdate = this.dropDownUpdate;, it would be a total no-op—you're just assigning the property to itself, doing nothing useful. Worse, if you were using a regular class method (not an arrow function), this change would break your code entirely.

Let's clarify the two key scenarios to avoid confusion:

1. Regular class method scenario:

   class BottomPanel extends React.Component<Props, {}> {
     constructor(props) {
       super(props);
       // This line is mandatory here—without it, `this` would be undefined in the method when called as an event handler
       this.dropDownUpdate = this.dropDownUpdate.bind(this);
     }
     dropDownUpdate(e) {
       this.setState({ dropDownValue: e.currentTarget.textContent });
     }
   }
   

   Here, you absolutely can't simplify the bind line to this.dropDownUpdate = this.dropDownUpdate;—the regular method doesn't have a bound this, so you need .bind(this) to create a version that does.

2. Your arrow function class field scenario:
   The arrow function handles this binding automatically. That means the entire line this.dropDownUpdate = this.dropDownUpdate.bind(this); in your constructor is unnecessary. You can just delete it, and your code will work exactly as intended.

To wrap up:

• For your specific code, simplifying to this.dropDownUpdate = this.dropDownUpdate; is useless, and you're better off removing that line entirely.
• In the regular class method scenario, simplifying that line won't fix the this binding problem—you need the .bind(this) call.

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