In react, you can use setState() to modify the state of the component. setState() is a method used to update the component state. This method can queue changes to the component state and also obtain the latest state. The syntax is "this.setState({part of the data to be modified })".

#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

1. Stateful components and stateless components

1. First understand what state is:

Definition:

isdataused to describe the shape of things at acertain moment, generally calledstate. (It can be simply understood that the state is data)For example: the inventory quantity of books on September 23; the height of a person at the age of 18. There are also related concepts in vue

Features:

2. Stateful components and stateless components

Class componentis a stateful component.

Function componentis also calledstateless component

Note:

Redis video tutorial,Programming teaching]

class components

3. The state of class components

1) Define the state

state = { }for initialization

import React from "react"; export default class Hello extends React.Component { // 这里的state就是状态 state = { list: [{ id: 1, name: "给我一个div" }], isLoading : true }; }

2) Use

render() { return ( <> 
姓名-{this.state.name}
 
 {this.state.list.map((item) => ( 
{item.name}
 ))} 
 
{this.state.isLoading ? "正在加载" : "加载完成"}
  ); }

in the view 2. Event binding

1. Format

\

:React event names use camel case naming, such as: onMouseEnter, onFocus, onClick...

import React from 'react' import ReactDOM from 'react-dom' const title = 
react中的事件
 export default class Hello extends React.Component { fn() { console.log('mouseEnter事件') } render() { return ( 
 console.log('click事件') } onMouseEnte r = { this.fn } 
 ) } } const content = ( 
 {title} {} 
 ) ReactDOM.render ( content , document.getElementById ('root') )

Copy after login

:

The event name is in camel case naming format
Add methods in the class
this . fn
• Don’t

  add brackets:

  ##onClick={ this.fn( ) }
  At this time, fn() will be called first, and then the execution result of fn will be used as the processing function of the click event
  Don’t forget to write this

3. Event processing-this points to the problem

class App extends React.Component { // 组件状态 state = { msg: 'hello react' } // 事件处理函数 handleClick() { console.log(this) // 这里的this是 undefined } render() { console.log(this) // 这里的this是当前的组件实例 App return ( 
 点我 
 ) } }

Copy after login

The result is this:

This in the render method points to the current react component.

This in the event handler points to
• undefined
2. Reason:

class

use strictto specify the running mode. As long as your code is written in a class or module, only strict mode is available, so the function this in the class points to undefined3. Solving the event function this points to:

Method 1:

Wrap an arrow function in the event handler

Disadvantage: An additional arrow needs to be wrapped outside the handler function Function, the structure is not beautiful

{this.handleClick ()}

class App extends React.Component { state = { msg: 'hello react' } handleClick () { console.log(this.state.msg) } render () { return ( 
  { this.handleClick ( ) }}>点我 
 ) } }

Change the function this pointer through the bind() method and do not execute the function's characteristic solution

class App extends React.Component { state = { msg: 'hello react' } handleClick () { console.log(this.state.msg) } render () { return ( 
 点我 
 ) } }

Use the arrow function directly when declaring the event processing function in the class

class App extends React.Component { state = { msg: 'hello react' } handleClick = () => { console.log(this.state.msg) } render() { return ( 
 点我 
 ) } }

4. Modify the status of the component

##Note:

Modify through the
this.setState()

In react, setstate is a method used to update the component state state ;setState() queues changes to the component state and notifies React that it needs to re-render this component and its subcomponents with the updated state.

1.语法:

语法：this.setState( { 要修改的部分数据 } )
这是继承自React.Component的修改类组件状态的方法

state = { count: 0, list: [1, 2, 3], person: { name: 'jack', age: 18 } } // 【不推荐】直接修改当前值的操作： this.state.count++ ++this.state.count this.state.count += 1 this.state.count = 1 this.state.list.push(4) this.state.person.name = 'rose' // 【推荐】不是直接修改当前值，而是创建新值的操作： this.setState({ count: this.state.count + 1, list: [...this.state.list, 4], person: { ...this.state.person, // 要修改的属性，会覆盖原来的属性，这样，就可以达到修改对象中属性的目的了 name: 'rose' } })

class App extends React.Component { state = { msg: 'hello react' } handleChange = (e) => { this.setState({ msg: e.target.value }) } // value 绑定state 配合onChange事件双向绑定 render() { return ( 
  
 ) } }

import { createRef } from 'react' class Hello extends Component { txtRef = createRef() handleClick = () => { // 文本框对应的 DOM 元素 // console.log(this.txtRef.current) // 文本框的值： console.log(this.txtRef.current.value) } render() { return ( 
  获取文本框的值 
 ) } }