2022 is coming, the front end development is very rapid, now the front end is no longer writing simple pages, with the Web big front end, engineering is becoming more and more hot, there are also many frameworks. Many companies are not only using a single framework, as the front end development of the two most popular frameworks in the country, are necessary to master. Therefore, I decided to learn React at the end of this year when the epidemic was raging, so as to gain more competitiveness in my future job search.

Learning stage, if there is something wrong, welcome to leave a message in the comment area, I timely correction

This article has been serialized, other chapters portal ⬇️

Chapter 1 – Understanding JSX syntax

Chapter 2 – Function components and Class components

Chapter 3 — Props and State

Chapter 5 -Ref and Refs

Chapter 6 – Life Cycle

Chapter 7 – Communicating Context across Components

Chapter 8 -React Hooks

The event processing

React event handling must use small camel name and prevent calls to e.preventDefault() where default behavior must be displayed.

💡 problem: The React binding event this points to a problem

import React from 'react'
import ReactDoM from 'react-dom'

class Count extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0}}handleClick() {
    this.setState({
      count: this.state.count + 1})}render() {
    return (
      <div>
        <h2>The current sum is {this.state.count}</h2>
        <button onClick={this.handleClick}>Click on the</button>
      </div>
    )
  }
}

ReactDoM.render(<Count />.document.querySelector("#root"))
Copy the code

Error: handleClick cannot read the setState property of undefined (this is undefined).

• Function call mode This points to window by default, but in modularity strict mode is turned on by default and this points to undefined

• We know this is fine in the render function because the Render function was called by the React instance and this refers to the instance itself

• The event that we register is not called by React but when we fire the click event and so on, it’s called as a callback to the onClick event, so the result of the function’s execution is assigned to onClick, so this points to undefined, undefined doesn’t have a setState method on it

The solution

First: Bind changes this to point

class Count extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
    // this.handleClick = this.handleClick.bind(this)
  }
  handleClick() {
    this.setState({
      count: this.state.count + 1})}render() {
    return (
      <div>
        <h2>The current sum is {this.state.count}</h2>
        <button onClick={this.handleClick.bind(this)}>Click on the</button>
      </div>)}}Copy the code

Bind is written in JSX as well as in constructor, the render function is the instance that calls the method, and this points to the class, as well as constructor

Second: arrow function

class Count extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  handleClick = () = > {
    this.setState({
      count: this.state.count + 1})}render() {
    return (
      <div>
        <h2>The current sum is {this.state.count}</h2>
        <button onClick={this.handleClick}>Click on the</button>
      </div>)}}Copy the code

Arrow functions do not have this, default to parent, so they point to the instance

The ginseng

💡 What happens if we need to pass a parameter?

class Count extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  handleClick = (num) = > {
    console.log(num)
  }
  render() {
    return (
      <div>
        <h2>The current sum is {this.state.count}</h2>
        <button onClick={this.handleClick(2)}>Click on the</button>
      </div>)}}Copy the code

To refresh the browser, I have triggered the function execution before I click it, and when I click it again it will not execute because we called the function directly in the template and the function has already executed

The callback parameter

<button onClick={() = > { this.handleClick(2</button>Copy the code

Written in the form of a callback function, when we trigger the onClick event, perform the arrow is outer the function, the results of the arrow function is performed handleClick, and if it is executed directly, then a call as soon as I got up a direct, a layer of arrow function, this method packages only when I click on the arrow inside the function to perform, It’s just a Currie function.