React 入門

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

CreateForm コンポーネントの雛形を作る

コメントを新規投稿するためのフォームについてその雛形を作成します．まず，すでに作成しているはずの src/components/ フォルダに CreateForm.tsx という名前のファイルを作成します．このとき，ファイル名の先頭と単語の先頭が大文字になるように注意してください．Visual Studio Code では rafce と入力した後に Tab を押して次の雛形を作成します．（その他のエディタであれば下のコードをコピーして利用してください．）

src/components/CreateForm.tsximport React from 'react'

const CreateForm = () => {
  return (
    <div>CreateForm</div>
  )
}

export default CreateForm

今作成した CreateForm コンポーネントを CommentListPage コンポーネントに埋め込みます．まず，先頭で CreateForm

src/components/CommentListPage.tsx（抜粋）import React from 'react'
import Comment from './Comment';
import CreateForm from './CreateForm';

次に，return() の中で，{commentItems} の直後に <CreateForm /> を入力して埋め込みます．

src/components/CommentListPage.tsx（抜粋）return (
  <div className="container">
    <h1>コメント一覧</h1>
    {commentItems}

    <CreateForm />
  </div>
)

ブラウザで確認すると，CreateForm コンポーネントが CommentListPage に埋め込まれていることが確認できました．

続いて CreateForm にテキストボックスなどのフォームを配置します．このとき，タイトルと本文を入力するテキストボックスには textInput というクラス名を設定しておきます．

src/components/CreateForm.tsximport React from 'react'

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

export default CreateForm

上で配置した textInput クラスのテキストボックスについて，index.css でスタイリングします．

src/index.css.textInput {
  width: 100%;
  padding: 4px;
  margin: 0 0 8px;
  box-sizing: border-box;
}

ブラウザで表示内容と動作を確認します．現時点ではテキストボックスに入力できます．一方で，ボタンを押してもまだ何も起こらないはずです．

目次に戻る