フォーム

Webアプリに欠かせないフォームを作成してみましょう。

components配下にForm.tsxを作成しましょう。

returnで返却する部分はbootstrapのフォームを参考に作成します。

フォームgetbootstrap

Form.tsx◎

export const Form = () => {
  return (
    <form>
      <div className="mb-3">
        <label htmlFor="nameForm" className="form-label">
          名前
        </label>
        <input type="text" className="form-control" id="nameForm" />
      </div>
      <div className="mb-3">
        <label htmlFor="emailForm" className="form-label">
          メールアドレス
        </label>
        <input type="email" className="form-control" id="emailForm" />
      </div>
      <div className="mb-3">
        <label htmlFor="password" className="form-label">
          パスワード
        </label>
        <input type="password" className="form-control" id="password" />
      </div>
      <div className="mb-3 form-check">
        <input
          type="checkbox"
          className="form-check-input"
          id="isMagazineCheck"
        />
        <label className="form-check-label" htmlFor="isMagazineCheck">
          メールマガジンを希望する
        </label>
      </div>
      <button type="submit" className="btn btn-primary">
        送信
      </button>
    </form>
  );
};

こちらをApp.tsxにて呼び出しましょう。

App.tsx◎

...
import { UserList } from "./components/UserList"; 
import { Form } from "./components/Form"; 
...
      <UserList />
      <Form />
...

以下のようなフォームができたかと思います。

labelタグのhtmlForに関してですが、inputタグのidと同じ値を格納すると、label要素をクリックした際に、対象のinputタグにフォーカスされます。

formタグに関してですが、子要素のtype="submit"のbuttonタグが押された際に、onSubmit属性に渡した処理が走ります。handleSubmitという関数を定義して、onSubmitに渡しましょう。

Form.tsx◎

export const Form = () => {
  const handleSubmit = () => console.log("送信");

  return (
    <form onSubmit={handleSubmit}>
...

送信ボタンを押すと、コンソールに送信と出力されるかと思います。またページがリロードされるようになったかと思います。これはformタグのデフォルトの挙動で、自動的に入力内容を送信してページをリロードする処理が走ります。この処理をキャンセルすることができ、onSubmitにてFormEvent型のオブジェクトを受け取ることができるのですが、そのオブジェクトのpreventDefaultメソッドを呼び出すことで、デフォルトの処理をキャンセルすることができます。

Form.tsx◎

import { MouseEvent } from "react";

export const Form = () => {
  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("送信");
  };

  return (
    <form onSubmit={handleSubmit}>
...

次に各入力欄に入力したものをstateにて管理していきます。まずはUser型を作成して、User型のstateを定義します。

Form.tsx◎

import { MouseEvent, useState } from "react";

type User = {
  name: string;
  email: string;
  password: string;
  isMagazine: boolean;
};

export const Form = () => {
  const [newUser, setNewUser] = useState<User>({
    name: "",
    email: "",
    password: "",
    isMagazine: false,
  });

  const handleSubmit = (event: MouseEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("送信");
  };
...

inputタグにて入力された値をnewUserに格納する関数を作成します。inputタグにはonChange属性を付与することができ、入力があった際に処理が走ります。このonChange属性はChangeEvent型を引数に受け取ることができ、この型から入力された値を受け取ることができます。また、inputタグのname属性を受け取ることができ、これを利用することで、newUserのどのプロパティかを判断することができるため、name、email、passwordの変更を一つの関数で完結することができます。

関数を作成したら、inputタグに属性を付与していきます。まずnameにはstateの対応するプロパティ名、valueにはその対応するstateのプロパティの値、onChangeにはonChangeNewUserを渡します。

Form.tsx◎

...
  const onChangeNewUser = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    setNewUser({ ...newUser, [name]: value });
  };

  const handleSubmit = (event: MouseEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("送信");
  };


...
        <input
          name="name"
          type="text"
          className="form-control"
          id="nameForm"
          value={newUser.name}
          onChange={onChangeNewUser}
        />
...
        <input
          name="email"
          type="email"
          className="form-control"
          id="emailForm"
          value={newUser.email}
          onChange={onChangeNewUser}
        />
  
...
        <input
          name="password"
          type="password"
          className="form-control"
          id="password"
          value={newUser.password}
          onChange={onChangeNewUser}
        />
...

newUserの値が変更されたか確認するために、handleSubmitにてnewUserをコンソールに出力するようにしましょう。

Form.tsx◎

...
  const handleSubmit = (event: MouseEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(newUser);
  };
...

上記にて、フォームを入力して送信ボタンを押すと、newUserに値が格納されていることが確認できます。

isMagazineに関しては工夫が必要で、inputタグのtypeがcheckboxのため、チェックされたかどうかを受け取る必要があり、event.target.checkedを受け取ることで、チェックされた場合にtrue、外した場合にfalseを受け取ります。そして、checkboxの場合のみにcheckedの値を扱うため、event.target.typeを受け取り、typeがcheckboxの場合に、checkedの値を格納するようにします。

Form.tsx◎

...
  const onChangeNewUser = (event: ChangeEvent<HTMLInputElement>) => {
    const { name, value, type, checked } = event.target;
    setNewUser({ ...newUser, [name]: type === "checkbox" ? checked : value });
  };
...

次に、isMagazineを変更するinputタグを以下のように修正します。type="checkbox"のものに関しては、valueではなく、checkedという属性にboolean型を渡します。

Form.tsx◎

...
        <input
          name="isMagazine"
          type="checkbox"
          className="form-check-input"
          id="isMagazineCheck"
          checked={newUser.isMagazine}
          onChange={onChangeNewUser}
        />
...

上記にて、isMagazineの値も変更できるようになったかと思います。