2024/02/07こんにちは。IT業界歴4年目の「元木皇天」です。前回は「propを使用してコンポーネント間で値を渡す方法」について実施しました今回はReactのstateという機能を使用して、コンポーネント内のローカル変数の値変更を検知して画面を再描画する方法について解説いたします。【React基礎学習#3】stateを使用して画面をリアルタイムで再描画するやりたいことボタンをクリックすると、コンポーネント内の変数の値が更新されて、その変更が画面に反映される。関連記事stateとはstateとはコンポーネント内の変数を監視して、変化があった場合に画面を再描画することができる仕組みです。実際に使う場面の例としては、郵便番号を入力したら自動で住所を設定してくれるやつや、金額入力したら自動で消費税を計算して画面に表示してくれたりがあります。stateの使い方では、実際にstateを使用してみましょう。第1回で作成したプロジェクトをベースに進めるので、まだ未実施の場合はそちらの作成または、参照しながら読んでください。以下ファイルを作成してください。SampleState.tsx次に、今作成したファイルに以下のコードを記載してください。SampleState;ポイントとなる箇所を2点補足します。'react'」stateを使用するには、「useState」というものを使用します。そのため、コードの先頭でそれをインポートしてあげる必要があります。useState(0);」stateの変数はこのように宣言します。setCount]のように左側が変数名、右側がその変数の値を更新する関数名となっており、一般的に「setXXXXX」と命名されます。「useState(0)」のようにして、useStateの引数に変数の初期値を設定します。これでstateを使用することができます。変数「count」はReactによって値を監視されるようになり、値の変更があり次第画面に反映されます。最後に今回作成した「SampleState.tsx」コンポーネントを画面に表示しましょう。既存の「index.tsx」から今回作成したコンポーネントを呼び出します。</React.StrictMode>);reportWebVitals();ブラウザ画面を開くと、SampleState.tsxの内容が表示され、ボタンを押すとカウントアップされていくことが確認できます。まとめReactでStateを使用するには「useState」を使用する。元木皇天(サイト作成者)プライバシーポリシートップへ戻るcopyright©2020。