React组件中bind(this)的作用及与onClick、onChange交互的疑问

Hey there! Let's clear up your confusion around bind(this)—it all boils down to how JavaScript handles the this keyword, and how React event handlers work under the hood.

First: Why does this matter here? #

In JavaScript class methods, the value of this isn't automatically bound to the class instance. If you don't explicitly bind it, when the method is called as an event handler (like onChange or onClick), this will default to undefined (thanks to strict mode in React) instead of pointing to your TodoInput component. That means you wouldn't be able to access this.state, this.props, or other component methods when you need them.

What does this.handleChange.bind(this) actually do? #

Looking at your constructor code:

constructor(props) { 
  super(props); 
  this.state = { value: 'test', }; 
  this.handleChange = this.handleChange.bind(this); 
  this.addTodo = this.addTodo.bind(this); 
}

The bind() method creates a new copy of your handleChange function, where the this keyword is permanently set to the current TodoInput instance. When you assign this bound function back to this.handleChange, you're ensuring that no matter how the function is called (like when React triggers the onChange event), this will always refer to your component.

How does this interact with onChange/onClick? #

When you pass this.handleChange to an event prop like:

<input type="text" onChange={this.handleChange} value={this.state.value} />

React will call your handleChange function when the input's value changes. Without the bind(this) setup, this inside handleChange would be undefined, so trying to do something like this.setState({ value: e.target.value }) would throw an error.

With the bound function, this stays tied to your component instance—so you can safely access this.state, update it with this.setState, or use any props passed to the component.

Alternative: Arrow function class fields #

If you don't want to deal with binding in the constructor, you can use arrow functions for your class methods (this is a common modern approach):

class TodoInput extends Component { 
  constructor(props) { 
    super(props); 
    this.state = { value: 'test', }; 
    // No need for bind calls here!
  } 
  handleChange = (e) => { 
    console.log('CHANGE HERE...', e); 
    // `this` is automatically bound to the component instance
    this.setState({ value: e.target.value });
  }
}

Arrow functions inherit the this value from their surrounding context (the component instance), so you skip the explicit binding step. Just note that this requires support for class fields (you might need Babel setup if you're using older tooling).

To sum up #

• bind(this) locks the this keyword in your class method to the component instance.
• This is critical for event handlers like onChange and onClick, because React calls these functions outside the component's default context.
• Without binding, you'll lose access to this.state, this.props, and other component features in your handler methods.

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