React 入門

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

State と useState

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

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

const [state, setState] = useState(初期値);

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

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

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

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

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

  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) を指定します．

<div>
  <label>
    タイトル：
    <input
      type="text"
      className="textInput"
      value={title}
      onChange={handleTitleChange}
    />
  </label>
</div>

次に，handleTitleChange 関数を定義します．定義する場所は return 文の上で良いでしょう．とりあえずは handleTitleChange が実行されたときにコンソールへログが出力されるようにしておきます．

src/components/CreateForm.js（抜粋）
const CreateForm = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleTitleChange = () => {
    console.log("handleTitleChange");
  };

  return ( ...

ブラウザで確認すると，タイトルのテキストボックスでキー入力を行うと，コンソールに handleTitleChange という文字列が出力されることがわかります．

引数 event を受け取り次のようにすると，入力された文字列を取得することができます．

src/components/CreateForm.js（抜粋）
const handleTitleChange = (event) => {
  console.log(event.currentTarget.value);
};

setTitle 関数を使って入力された文字列で title の値を更新すると，テキストボックスにもその結果が反映されるようになります．同時にコンポーネントの内部状態として title にも文字列が保持されていることに注意してください．

src/components/CreateForm.js（抜粋）
const handleTitleChange = (event) => {
  setTitle(event.currentTarget.value);
};

同様に本文のテキストボックスにも入力ができるようにすると，コードの全体は次のようになります．

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

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

  const handleTitleChange = (event) => {
    setTitle(event.currentTarget.value);
  };

  const handleBodyChange = (event) => {
    setBody(event.currentTarget.value);
  };

  return (
    <>
      <hr />
      <article>
        <h2>コメントの新規投稿</h2>
        <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>
      </article>
    </>
  )
}

export default CreateForm

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

目次に戻る