React でコンポーネントのステータスを変更する方法

react では、setState() を使用してコンポーネントの状態を変更できます。setState() は、コンポーネントの状態を更新するために使用されるメソッドです。このメソッドは、コンポーネントの状態への変更をキューに入れ、最新の状態を取得することもできます状態、構文は「setState(updater,[callback function])」です。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react でコンポーネントの状態を変更する方法

React では、コンポーネントの状態を直接変更することはできません。setState() を通じて変更する必要があります。

react では、コンポーネントの状態を直接変更することはできません。 、setstate はコンポーネントの状態を更新するメソッドとして使用されます。setState() はコンポーネントの状態への変更をキューに入れ、更新された状態を使用してこのコンポーネントとそのサブコンポーネントを再レンダリングする必要があることを React に通知します。構文は "setState(object, [callback function] ）」。

構文:

setState(updater[, callback])

updater updater

callback update 後に実行されるコールバック関数

ステータスの変更

Forたとえば、state のコンテンツ値を 'Xiangxiang' に変更する場合は、

state = {
  content: '大熊'
}

ビューを直接変更して更新をトリガーすることはできません:

this.state.content = '香香'

setState を通じて変更する必要があります。 :

this.setState({
  content: '香香'
})

最新のステータス値の取得

setState() は非同期であるため、ステータスを変更した後は最新の値を取得できない場合があります。最新の状態を取得するには、状態値は setState() のコールバック関数を提供できます。このコールバックは状態が更新された後に実行されます。最新の状態はコールバック関数で取得できます。

例:

this.setState({
  content: '香香'
}, () => {
  // 通回调获取最新的状态
  console.log(this.state.content)
})

setState() 最初のパラメータは関数にすることもできます。この関数は 2 つのパラメータを受け取ります: 最初のパラメータは更新前の状態値、2 番目のパラメータは props (親コンポーネントによって渡されたデータを取得できます)。状態を変更する場合、この形式は前の状態値に到達したときに使用できます。

this.setState((state, props) => {
  console.log(state.content, props)
  // 返回一个对象
  return {
    content: prev.content + '香香'
  }
})

推奨学習: 「react ビデオ チュートリアル 」

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