React 入門

TypeScript コメント掲示板アプリの開発

State と useState

State（ステート）はコンポーネントの内部状態を管理する仕組みです．ここでは，CreateForm コンポーネントにおいてタイトルと本文のテキストボックスに入力されている値を State で管理することにします．この State を利用することでテキストボックスの表示内容を更新したり取得したりできるようになります．

State を利用するには，useState() 関数で初期化します．この関数の構文は次の通りです．

const [state, setState] = useState<データ型>(初期値);

State として管理したい変数 abc があったとすると，その値を更新するための関数は setAbc のように命名するのが一般的です．タイトルについては title という変数を管理したいので，その値を更新するための関数を setTitle にします．同様に本文にも body という変数と更新するための関数 setBody を使用します．なお，どちらもデータ型は文字列型で初期値は空の文字列とします．

const [title, setTitle] = useState<string>('');
const [body, setBody] = useState<string>('');

この useState によってコンポーネントの内部状態を管理するので，それぞれのテキストボックスに value 属性を追加します．また，useState をプログラムの先頭でインポートします．

src/components/CreateForm.tsx
import React from 'react'
import { useState } from 'react';

const CreateForm = () => {
  const [title, setTitle] = useState<string>('');
  const [body, setBody] = useState<string>('');

  return (
    <>
      <hr />
      <article>
        <h2>コメントの新規投稿</h2>
        <form>
          <div>
            <label>
              タイトル：
              <input
                type="text"
                className="textInput"
                value={title}
              />
            </label>
          </div>
          <div>
            <label>
              本文：
              <input
                type="text"
                className="textInput"
                value={body}
              />
            </label>
          </div>
          <div>
            <button>コメントの追加</button>
          </div>
        </form>
      </article>
    </>
  )
}

export default CreateForm

この時点でテキストボックスへの入力が受け付けられないようになりました．テキストボックスへの入力できるようにするためにはそのためのコードを追加することが必要です．このために，タイトルのテキストボックスに onChange 属性を追加し，テキストボックスに変化があったときに実行される関数名 (handleTitleChange, handleBodyChange) を指定します．

<form>
  <div>
    <label>
      タイトル：
      <input
        type="text"
        className="textInput"
        value={title}
        onChange={handleTitleChange}
      />
    </label>
  </div>
  <div>
    <label>
      本文：
      <input
        type="text"
        className="textInput"
        value={body}
        onChange={handleBodyChange}
      />
    </label>
  </div>
  <div>
    <button>コメントの追加</button>
  </div>
</form>

次に，handleTitleChange 関数と handleBodyChange 関数を定義します．定義する場所は return 文の上で良いでしょう．それぞれの関数の中で setTitle 関数を使って入力された文字列で title や body の値を更新すると，テキストボックスにもその結果が反映されることになります．その結果として，テキストボックスに入力できるようになります．

src/components/CreateForm.tsx（抜粋）
const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setTitle(event.currentTarget.value);
};

const handleBodyChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setBody(event.currentTarget.value);
};

return (
  ...

タイトルと本文に文字列が入力でき，その内部状態を保持できるようになりました．次のページでは新たなコメントを追加できるようにします．

目次に戻る