All the partners who have used vue know the role of components, and the components in react have the same role. Next, I'll introduce how we should use components in react

The components of react are mainly divided into four categories

         Basic components: basic tags such as input and button, as well as general UI components encapsulated by antd

         Business component: business abstraction UI composed of basic components. For example, a drop-down box containing all department information of company A

         Block component: a UI block composed of basic components and business components

         Page component: the final page displayed to the user, which generally corresponds to a routing rule

react creates components in two ways   One is function creation, the other is class creation

Functional formula:

const Com1 = () => {
  return <div>Functional component</div>
}

Class components:         (extensions is a keyword used to implement inheritance between classes)

class Com2 extends React.Component {
  render () {
    return <div>Class component</div>
  }
}

Define the initial capital of the component function name and write the return value

Just write labels where you need them, which is similar to vue   

const content = (
  <div>
    {<Com1 />}
    <hr />
    {<Com2 />}
  </div>
)

ReactDOM.render(content, document.getElementById('root'))

The components in react are divided into stateful components and stateless components   Knock on the blackboard

So what is state

The definition given is   Data state used to describe the form of things at a time

Whether there is a state or not is whether the state component can be defined

The fixed format uses state = {} to store data

class Com2 extends React.Component {
  state={}
  render () {
    return <div>Class component</div>
  }
}

Event binding

format

<Element event name 1={ Event handler 1 } Event name 2={ Event handler 2 }  ></element>

for example

class Hello extends React.Component {
  fn() {
    console.log('mouseEnter event')
  }
  render() {
    return (
      <div
        onClick={() => console.log('click event')}
        onMouseEnter={this.fn}
      </div>
    )
  }
}

Pay attention to this problem in event handling ⭐⭐⭐⭐⭐

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this) // this here is undefined
  }
  render() {
    console.log(this) // this here is an example
    return (
      <div>
        <button onClick={this.handleClick}>Point me</button>
      </div>
    )
  }
}

This is because of the use strict mode of event handlers in class  

There is a problem with the direction of this. How should we write event handling code? It's okay. We have a solution   There are three main types

Use bind to change this point

 <button onClick={this.handleClick.bind(this)}>Point me</button>

Use the arrow function to change the direction of this

 <button onClick={() => {this.handleClick()}}>Point me</button>

The third method I often use is to use the arrow function to change the direction of this

 <button onClick={this.handleClick}>Point me</button>

 handleClick = () => {
    console.log(this.state.msg)
  }

Next, you need to modify the state through events

Remember that the state of the core idea of react is immutable

Instead of modifying the state directly, create a new state value

Let's take a small case   👈👈👈 Or read my other blog

Get the value of the form element in react

In vue, we all know that there is a two-way binding of v-model

In react, we have two ideas

Uncontrolled component: directly find the form element for dom operation

Controlled component: bind form element values with state and synchronize them into state. Let the component be controlled by react

Uncontrolled components

Use the native DOM method to get the value of form elements with ref

Import on demand first

import { createRef } from 'react'

And then call this method to create references and name them. Next I'll call it refDom.

const refDom = createRef()

Set the ref attribute to the form element

<input ref={refDom}/>

Get the value through refDom.current.value

console.log(this.refDom.current.value)

Example:

import { createRef } from 'react'

class Hello extends Component {
  refDom = createRef()

  handleClick = () => {
    console.log(this.refDom.current.value)
  }

  render() {
    return (
      <div>
        <p><input type="text" ref={this.refDom}/></p>
        <button onClick={handleClick}>Gets the value of the text box</button>
      <div>
    )
  }
}

Controlled components  

Define state in state   Then, the state is bound with the value of the form, and the value of the form element is controlled by the state

1. Text box, text field, drop-down box: value  + onChange event

2. Check box: checked  + onChange event

3. Radio button group: checked  + onChange event

Example

class App extends React.Component {
  state = {
    msg: ''
  }

  handleChange = (e) => {
    this.setState({
      msg: e.target.value
    })
  }
  
  handleClick = ()=> {
    console.log(this.state.msg)
  }

  render() {
    return (
      <div>
      	<h1>How to get input Values in-Controlled components</h1>
        <p>
          	<input type="text"
				   value={this.state.msg}
				   onChange={this.handleChange}/>
        </p>
        <button onClick={handleClick}>Gets the value of the text box</button>
      <div>
    )
  }
}