Comment changer l'état d'un composant en réaction

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.

1. Composants avec état et composants sans état

---

1. Comprenez d'abord ce qu'est l'état :

Définition :

est utilisé pour décrire la forme des choses à un certain moment dans 某一时刻的形态的数据 ,  一般称为state。(可以简单理解为状态就是数据)
例如：9月23号时书的库存数量； 18岁时人的身高. vue中也有相关的概念

特点:

能被改变，改变了之后视图会有对应的变化 (双向数据绑定)

2.有状态组件和无状态组件

有状态组件：能定义state的组件。类组件就是有状态组件。

无状态组件：不能定义state的组件。函数组件又叫做无状态组件

注意:

2019年02月06日，React 16.8版本中引入了 React Hooks，从而函数式组件也能定义自己的状态了。【相关推荐：Redis视频教程、编程教学】

本文主要讲解类组件的状态

3.类组件的状态

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.格式

6a0c90f0d644f9cc41c34c5db4ca90650adaba3e89c641156828c5bef7bd8846

注意：

React 事件名采用驼峰命名法，比如：onMouseEnter、onFocus、 onClick ......

2.示例

import React from 'react'
import ReactDOM from 'react-dom'

const title = <h1>react中的事件</h1>


export default class Hello extends React.Component {
  fn() {
    console.log(&#39;mouseEnter事件&#39;)
  }
  render() {
    return (
      <div
            onClick = { () => console.log(&#39;click事件&#39;) }
            onMouseEnte r = { this.fn }
      </div>
    )
  }
}

const content = (
  <div>
    {title}
    {<Hello />}
  </div>
)

ReactDOM.render ( content , document.getElementById (&#39;root&#39;) )

注意事项：

• 事件名是小驼峰命名格式

• 在类中补充方法

• this . fn不要加括号：

  • onClick={ this.fn( ) } 此时会先调用fn()，然后将fn的执行结果当做click事件的处理函数

别忘记了写this

三、事件处理-this指向问题

---

1.问题代码:

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>
        )
      }
}

结果是这样:

• render方法中的this指向的是当前react组件。
• 事件处理程序中的this指向的是undefined

2.原因:

class类和模块的内部，默认就是严格模式，所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用,所以类中的函数this指向了undefined

3.解决事件函数this指向:

方式1:

在事件处理程序外套一层箭头函数

缺点：需要在处理函数外额外包裹一个箭头函数, 结构不美观

优点:

前面讲过在 {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>
    )
  }
}

方式2：使用bind

通过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>
    )
  }
}

方式3：

在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

de /code> sont généralement appelées

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)🎜

🎜2 Composants avec état et composants sans état🎜🎜🎜Composants avec état : composants qui peuvent. définir l'état. Les 🎜Les composants de classe🎜 sont des composants avec état. 🎜🎜Composants sans état : composants qui ne peuvent pas définir d'état. 🎜Composants fonctionnels🎜également appelés 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🎜🎜

🎜3. L'état des composants de classe🎜🎜🎜🎜1) Définir l'état🎜🎜🎜Utilisez 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'
    }
  })

🎜🎜2) Utilisez 🎜🎜

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>
    )
  }
}

🎜2. Liaison d'événement🎜🎜🎜

🎜1 Format🎜🎜

🎜2b7881d60174e09620051572f3842b5714138f913db36d08620ba5becb69ce58🎜🎜🎜Remarque🎜 :🎜🎜Les noms d'événements React utilisent une dénomination en casse chameau, telle que : onMouseEnter , onFocus, onClick...🎜

🎜2 Exemple🎜

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>
    )
  }
}

🎜🎜Notes🎜:🎜

• 🎜Le nom de l'événement est au format de dénomination Camel Case🎜
• 🎜Complétez la méthode dans la classe🎜
• 🎜this . fn🎜Ne pas🎜ajouter brackets:🎜
• 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 clic

🎜N'oubliez pas d'écrire ceci🎜

🎜Traitement de l'événement - ces points. au problème🎜🎜🎜

🎜1. Code de question :🎜🎜🎜rrreee🎜Le résultat est le suivant :🎜

• Ceci dans la méthode de rendu pointe vers le courant. réagir composant.
• Ceci dans le gestionnaire d'événements pointe vers undefined

🎜2 Raison :🎜 🎜🎜. class 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🎜

🎜3 Résolvez la fonction d'événement this. pointe vers :🎜 🎜

🎜Méthode 1 :🎜

🎜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🎜rrreee

🎜Méthode 2 : Utilisez bind🎜

🎜Changer le point this de la fonction via la méthode bind() n'exécute pas la solution caractéristique de la fonction🎜rrreee

🎜Méthode 3 : 🎜 h4>🎜Utiliser 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🎜

🎜4. Modifier l'état du composant🎜🎜🎜🎜🎜🎜🎜🎜Remarque :🎜🎜🎜Vous ne pouvez pas changer la vue en modifiant directement la valeur dans l'état ! code>this.setState()Modification de la méthode🎜🎜Dans React, setstate est la méthode utilisée pour mettre à jour l'état du composant ; setState() met en file d'attente les modifications apportées à l'état du composant et informe React qu'il doit restituer ce composant. et ses composants en utilisant l'état mis à jour. 🎜

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'
    }
  })

五、表单处理-受控组件

---

• HTML中表单元素是可输入的，即表单维护着自己的可变状态（value）。
• 但是在react中，可变状态通常是保存在state中的，并且要求状态只能通过setState进行修改。
• React中将state中的数据与表单元素的value值绑定到了一起，由state的值来控制表单元素的值
• 受控组件：value值受到了react控制的表单元素

示例代码:

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( { 要修改的部分数据 } )操作对应的状态即可

六、表单处理-非受控组件-ref

---

• 受控组件是通过 React 组件的状态来控制表单元素的值
• 非受控组件是通过手动操作 DOM 的方式来控制
• ref：用来在 React 中获取 DOM 元素

示例代码:

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!