Reactでstateの値を変更する方法

React で状態値を変更する方法: まず、対応する React コード ファイルを開き、React が提供する "this.setState({key name: value})" メソッドを使用して状態値を変更します。

#このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン。この方法はすべてのブランドのコンピューターに適しています。

関連する推奨事項: 「

react チュートリアル 」

react での state の値の変更

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

このように書くこともできます

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

注:

React で状態のデータを再代入したい場合は、使用しないでくださいthis.state.xxx = 値。変更するには、React が提供する this.setState({key name: value}) を使用する必要があります。

this.state に複数の値があり、そのうちの 1 つだけが変更された場合、他の値には影響しません。 SetState は、対応する状態値を更新するだけであり、他の状態値は上書きされません。

同時に、 this.setState メソッドの実行は非同期です。そこで最新のステータス値を取得したいと思います。コールバック関数を渡す必要があります。

以上がReactでstateの値を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。