Dans React, vous pouvez utiliser setState() pour modifier l'état du composant. setState() est une méthode utilisée pour mettre à jour l'état du composant. Cette méthode peut mettre en file d'attente les modifications de l'état du composant et peut également obtenir le dernier état. La syntaxe est "this.setState({partie des données à modifier })".
L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.
Définition :
est utilisé pour décrire la forme des choses à un certain moment dans 某一时刻的形态的数据 , 一般称为state。(可以简单理解为状态就是数据)
例如：9月23号时书的库存数量； 18岁时人的身高. vue中也有相关的概念
特点:
能被改变，改变了之后视图会有对应的变化 (双向数据绑定)
有状态组件：能定义state的组件。类组件就是有状态组件。
无状态组件：不能定义state的组件。函数组件又叫做无状态组件
注意:
2019年02月06日，React 16.8版本中引入了 React Hooks，从而函数式组件也能定义自己的状态了。【相关推荐：Redis视频教程、编程教学】
本文主要讲解类组件的状态
1）定义状态
使用 state = { } 来做初始化
import React from "react";
export default class Hello extends React.Component {
// 这里的state就是状态
state = {
list: [{ id: 1, name: "给我一个div" }],
isLoading : true
};
}2）在视图中使用
render() {
return (
<>
<h1>姓名-{this.state.name}</h1>
<ul>
{this.state.list.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
<div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
</>
);
}<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 } ></元素>
注意：
React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick ......
import React from 'react'
import ReactDOM from 'react-dom'
const title = <h1>react中的事件</h1>
export default class Hello extends React.Component {
fn() {
console.log('mouseEnter事件')
}
render() {
return (
<div
onClick = { () => console.log('click事件') }
onMouseEnte r = { this.fn }
</div>
)
}
}
const content = (
<div>
{title}
{<Hello />}
</div>
)
ReactDOM.render ( content , document.getElementById ('root') )注意事项：
事件名是小驼峰命名格式
在类中补充方法
this . fn不要加括号：
onClick={ this.fn( ) } 此时会先调用fn()，然后将fn的执行结果当做click事件的处理函数别忘记了写this
class App extends React.Component {
// 组件状态
state = {
msg: 'hello react'
}
// 事件处理函数
handleClick() {
console.log(this) // 这里的this是 undefined
}
render() {
console.log(this) // 这里的this是当前的组件实例 App
return (
<div>
<button onClick={this.handleClick}>点我</button>
</div>
)
}
}结果是这样:
undefinedclass类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用,所以类中的函数this指向了undefined
在事件处理程序外套一层箭头函数
缺点：需要在处理函数外额外包裹一个箭头函数, 结构不美观
优点:
前面讲过在 {this.handleClick ( )}这里面调用处理函数的时候不要加小括号,不然里面的程序会立即执行掉,现在在外面包裹一层箭头函数之后,不仅可以加上小括号,还能实现传参,后面会用到
class App extends React.Component {
state = {
msg: 'hello react'
}
handleClick () {
console.log(this.state.msg)
}
render () {
return (
<div>
<button onClick={ () => { this.handleClick ( ) }}>点我</button>
</div>
)
}
}通过bind()方法改变函数this指向并不执行该函数的特性解决
class App extends React.Component {
state = {
msg: 'hello react'
}
handleClick () {
console.log(this.state.msg)
}
render () {
return (
<div>
<button onClick={ this.handleClick.bind (this) }>点我</button>
</div>
)
}
}在class中声明事件处理函数的时候直接使用箭头函数
class App extends React.Component {
state = {
msg: 'hello react'
}
handleClick = () => {
console.log(this.state.msg)
}
render() {
return (
<div>
<button onClick={this.handleClick}>点我</button>
</div>
)
}
}优点:
代码简洁,直观,使用最多的一种方式
注意:
不能通过直接修改state中的值来让视图变化 ! ! !
通过this.setState()data
state
. (On peut simplement comprendre que le statut est une donnée)🎜Par exemple : la quantité de livres en stock au 23 septembre ; peut être modifié, après le changement La vue aura les modifications correspondantes (liaison de données bidirectionnelle)🎜composants sans état🎜🎜🎜Remarque :🎜🎜🎜Le 6 février 2019, les React Hooks ont été introduits dans la version 16.8 de React, afin que les composants fonctionnels puissent également définir leur propre état. [Recommandations associées : Tutoriel vidéo Redis, Enseignement de la programmation】🎜🎜Cet article explique principalement le statut des 🎜composants de classe🎜🎜state = { } pour initialiser🎜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 (
<div>
<input type="text" value={this.state.msg} onChange={this.handleChange}/>
</div>
)
}
}< Nom de l'événement d'élément 1 = {Fonction de gestion d'événement 1} Nom de l'événement 2 = {Fonction de gestion d'événement 2} ></Element>🎜🎜🎜Remarque🎜 :🎜🎜Les noms d'événements React utilisent une dénomination en casse chameau, telle que : onMouseEnter , onFocus, onClick...🎜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 (
<div>
<input ref={this.txtRef} />
<button onClick={handleClick}>获取文本框的值</button>
</div>
)
}
}onClick={ this.fn() } À ce moment, fn() sera appelé en premier, puis le résultat de l'exécution de fn sera utilisé comme traitement fonction de l'événement de clicundefinedclass En interne, le mode par défaut est le mode strict, il n'est donc pas nécessaire d'utiliser use strict pour spécifier le mode d'exécution. Tant que votre code est écrit dans une classe ou un module, seul le mode strict est disponible, donc la fonction this dans la classe pointe vers undefined🎜Encapsuler une fonction de flèche dans le gestionnaire d'événements🎜🎜Inconvénient : un emballage supplémentaire est requis en dehors de la fonction de gestionnaire Une fonction flèche avec une structure laide🎜🎜Avantages :🎜🎜Comme mentionné précédemment, n'ajoutez pas de parenthèses lors de l'appel de la fonction de traitement dans {this.handleClick ( )}, sinon le programme à l'intérieur sera exécuté immédiatement Ok, maintenant après avoir enveloppé une couche de fonction de flèche à l'extérieur, vous pouvez non seulement ajouter des parenthèses, mais aussi transmettre des paramètres, qui seront utilisés plus tard🎜rrreeeChanger le point this de la fonction via la méthode bind() n'exécute pas la solution caractéristique de la fonction🎜rrreeeUtiliser les fonctions fléchées directement lors de la déclaration des fonctions de gestion d'événements dans les classes🎜rrreee🎜Avantages :🎜🎜Le code est concis, intuitif et c'est la méthode la plus utilisée🎜语法：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'
}
})setState进行修改。由state的值来控制表单元素的值示例代码:
class App extends React.Component {
state = {
msg: 'hello react'
}
handleChange = (e) => {
this.setState({
msg: e.target.value
})
}
// value 绑定state 配合onChange事件双向绑定
render() {
return (
<div>
<input type="text" value={this.state.msg} onChange={this.handleChange}/>
</div>
)
}
}注意事项：
使用受控组件的方式处理表单元素后，状态的值就是表单元素的值。即：想要操作表单元素的值，只需要通过this.setState( { 要修改的部分数据 } )操作对应的状态即可
示例代码:
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 (
<div>
<input ref={this.txtRef} />
<button onClick={handleClick}>获取文本框的值</button>
</div>
)
}
}（学习视频分享：编程基础视频）
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Python est-il front-end ou back-end ?
Comment implémenter la messagerie instantanée sur le front-end
La différence entre front-end et back-end
Introduction à la relation entre php et front-end
Qu'est-ce que l'indice Baidu
Comment définir le statut hors ligne sur Douyin
A quoi sert la gestion du stockage ?
Tutoriel de création de tableaux de documents Word
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
