The React incident

React event binding is essential in learning React. How does react event binding work

// Start to make mistakes
class Title extends Component {
  handleClickOnTitle () {
    console.log('Click on title.')
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>The React little book</h1>)}}Copy the code

The react code does not seem to have any problems with javascript. Because the event binding is a function call, it can’t get this, so you can try it out, so what’s the right way to write it, I’ll just write it my own way, and there are other ways, but it’s just a personal habit.

class Title extends Component {
  handleClickOnTitle =  () = > {
    console.log('Click on title.')
  }

  render () {
    return (
      <h1 onClick={this.handleClickOnTitle}>The React little book</h1>)}}Copy the code

The arrow function does not have this. The arrow function points to this, which is closest to its outer scope. Is the current instance of this, is why the first one to get less than the current component instance of this, someone must ask, because if it is the first writing, the function will produce a scope inside, so you use this is the function of this, you cannot use this component instance, it is not in line with our expectations, Oh, you’re out of school.