Maison  >  Article  >  interface Web  >  Comment changer la valeur de l'état en réaction

Comment changer la valeur de l'état en réaction

藏色散人
藏色散人original
2020-12-17 11:06:363982parcourir

Comment changer la valeur de l'état dans React : ouvrez d'abord le fichier de code de réaction correspondant ; puis utilisez la méthode "this.setState({key name: value})" fournie par React pour modifier la valeur de l'état.

Comment changer la valeur de l'état en réaction

L'environnement d'exploitation de ce tutoriel : système Windows7, version React17.0.1, cette méthode convient à toutes les marques d'ordinateurs.

Recommandations associées : "Tutoriel React"

Changer la valeur de l'état dans React

import React from 'react'
 
export default  class ClickS extends React.Component {
  constructor () {
    super()
    this.state= {
      msg: '123'
    }
  }
  render () {
    return <div>
      <button onClick={()=>this.show()}>按钮</button>
      <h2>{this.state.msg}</h2>
    </div>
  }
  show () {
    console.log(this)
    this.setState({
      msg: &#39;222&#39;
    })
  }
}

Comment changer la valeur de létat en réaction

Vous pouvez également écrire comme ceci

<button onClick={this.show.bind(this)}>按钮</button>
show () {
  console.log(this)
  this.setState({
    msg: &#39;222&#39;
  }, () => {
    console.log(this.state.msg) // 更新后的值222
  })
  console.log(this.state.msg) // 123
}

Comment changer la valeur de létat en réaction

Remarque :

Si vous souhaitez réaffecter les données dans l'état dans React, n'utilisez pas this.state.xxx = valeur. Vous devez utiliser this.setState({key name: value}) fourni par React pour apporter des modifications.

Si this.state a plusieurs valeurs, la modification d'une seule d'entre elles n'affectera pas les autres valeurs. SetState mettra uniquement à jour la valeur d'état correspondante et n'écrasera pas les autres valeurs d'état.

Comment changer la valeur de létat en réaction

En même temps, l'exécution de la méthode this.setState est asynchrone. Je veux donc obtenir la dernière valeur de statut. Besoin de passer la fonction de rappel.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn