【React】UseStateとイベントリスナーを使ってみる

2024年10月26日

一度理解したつもりでも、実際に触ってみるといつも忘れてしまうため、自分への備忘録もかねて。
基本的なUseStateの使い方と、イベントリスナーの使い方について、まとめています。

CONTENTS

サンプルコード

サンプルのコードをCodesandboxであげています。

UseStateとは

その名の通り、状態を管理するReactのhook。

よく使用されるのが、クリックイベントなどで、値を取得してその値に対して何か操作をしたいとき。

reactからUseStateをimportをして使用します。
そして、分割代入で、値を変数化させます。

下記では、inputの入力した値を表示させるようにしています。

import { useState } from "react";

export default function App() {
  // 配列の一番目に初期値、2番目に更新用の関数が格納されるので、分割代入で値を取得するのが通例
  let [val, setVal] = useState("初期値");
  console.log(val);
  console.log(setVal);
  return (
    <div className="App">
      <h2>onChangeイベント</h2>
      <p>入力された値：{val}</p>
      <div>
        <input type="text" onChange={(e) => setVal(e.target.value)} />
      </div>
    </div>
  );
}

分割代入について、下記にまとめてますので、よければ参考ください。

下記が、UseStateの使用方法。配列の1番目に、初期値が、2番目に、値を更新ようの関数が格納されるようになっているそうです。

let [val, setVal] = useState("初期値");

UseStateは、必ずコンポーネント内、トップレベルで記述すること！

コンポーネント外では読み込まない

let [val, setVal] = useState("初期値");

export default function App() {

  return (
    <div className="App">

    </div>
  );
}

トップレベルで読み込まれてない。下記のようにif文内で記述したりしない。

export default function App() {
if(true){
let [val, setVal] = useState("初期値");
}
  return (
    <div className="App">

    </div>
  );
}

UseStateとイベントリスナーをつかってみる

下記は、onChangeイベントで、inputに入力された値を取得し、それをsetVal関数にわたすことで、値が更新されます。
いつもどっちがどっちになるかこんがらがるので、簡単なコードでまずは理解しておくことをおすすめします。

  return (
    <div className="App">
      <h2>onChangeイベント</h2>
      <p>入力された値：{val}</p>
      <div>
        <input type="text" onChange={(e) => setVal(e.target.value)} />
      </div>
    </div>
  );

ボタンをクリックした回数でカウントをアップするという処理は、こちら。

export default function App() {
  let [count, setCount] = useState(0);
  const hundleClick = () => {
    setCount(count + 1);
    console.log(count);
    console.log(setCount);
  };

  return (
    <div className="App">
      <h2 className="c-title">Eventリスナー</h2>
      <p>クリックした回数{count}</p>
      <button onClick={hundleClick}>Count Button</button>
    </div>
  );
}

form要素などで使用することが多いと思うのですが、まずは基本的なものだけまとめて、これを理解したうえで、次にステップアップしたいと思います。