Chapter 04無料公開

フォームに入力された文字列を状態 (=state) として保持する

Kei Touge
Kei Touge
2021.10.23に更新

フォームに入力された文字列を 状態 (=ステート) として保持するため、useState フックを導入します。

useState フックの構文

構文
const [foo, setFoo] = React.useState('bar');
  • useState:
    • 引数となるのはステートの初期値です
    • 現在のステート foo と、それを更新するための関数 setFoo とをペアにして返します
  • foo: 現在のステートの値です
  • setFoo: ステートを更新するメソッドです

https://ja.reactjs.org/docs/hooks-state.html

text ステートを作成

src/App.tsx
// React から useState フックをインポート
import { useState } from 'react';

export const App = () => {
  /**
   * text = ステートの値
   * setText = ステートの値を更新するメソッド
   * useState の引数 = ステートの初期値 (=空の文字列)
   */
  const [text, setText] = useState('');

  return (
    <div>
      <form onSubmit={(e) => e.preventDefault()}>
        {/*
          入力中テキストの値を text ステートが
          持っているのでそれを value として表示

          onChange イベント(=入力テキストの変化)を
          text ステートに反映する
         */}
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <input
          type="submit"
          value="追加"
          onSubmit={(e) => e.preventDefault()}
        />
      </form>
    </div>
  );
};

2021-04-24 17.54.47 (1).png