【React】フォームでよく使う記述(input,textarea,ラジオボタン,チェックボックス,select)

2022年11月29日React

Reactでフォーム作成のときによく使う記述(input,textarea,ラジオボタン,チェックボックス)を紹介します。

inputとtextarea

import { useState } from "react";

const Sample = () => {

  const [val, setVal] = useState("");
  const clearVal = () => setVal("");

  return (
    <div>
      <label htmlFor="input">ラベル</label>
      <div>
        <input
          id="input"
          placeholder="こんにちは"
          value={val}
          onChange={(e) => setVal(e.target.value)}
        />
        <textarea
          id="textarea"
          placeholder="こんにちは"
          value={val}
          onChange={(e) => setVal(e.target.value)}
        />
      </div>
      <p>{val}</p>
      <button onClick={clearVal}>クリア</button>
    </div>
  );
};

export default Sample;

まず、htmlのlabelについてるfor属性は、htmlForという属性になります。
for文などでforというキーワードは使うため、ReactではhtmlForという属性名にしています。
inputもtextareaもだいたいvalue属性とonChange属性をセットします。
値を初期状態に戻したいときは、onClickにはコールバック関数をとるため更新用関数を関数の戻り値として返すことで、正常に動作します。

ラジオボタン

import { useState } from "react";

// POINT ラジオボタンの実装
const Sample = () => {
  const [animal, setAnimal] = useState("さる");

  const RADIO_COLLECTION = ["さる", "ゴリラ", "犬", "猫"];

  return (
    <>
      {RADIO_COLLECTION.map((value) => {
        return (
          <label key={value}>
            <input
              type="radio"
              value={value}
              checked={animal === value}
              onChange={(e) => setAnimal(e.target.value)}
            />
            {value}
          </label>
        );
      })}
      <h3>好きな動物：{animal}</h3>
    </>
  );
};

export default Sample;

ラジオボタンのときは、だいたい複数選択肢があるため、mapを使って新しい配列を返します。
そのときvalueやonChangeはinputなどとほぼ同じですが、ループするので、key属性は忘れずに設定します。

チェックボックス(単体)

import { useState } from "react";

// POINT チェックボックスの実装
const Sample = () => {
  const [isChecked, setIsChecked] = useState(true);

  return (
    <div>
      <label htmlFor="check">
        チェック：
      </label>
      <input
        type="checkbox"
        id="check"
        checked={isChecked}
        onChange={() => setIsChecked(prevState => !prevState)}
      />
      <div>{isChecked ? "チェックあり" : "チェックなし"}</div>
    </div>
  );
};

export default Sample;

チェックボックスの場合、onChangeでは、値を反転させたいので、上のようにコールバック関数で設定します。
値をそのまま返すと非同期の処理のため、うまく動作しません。

チェックボックス(複数)

import { useState } from "react";

const Sample = () => {
  const [animals, setAnimals] = useState([
    { label: "さる", num: 12, checked: false },
    { label: "犬", num: 7, checked: false },
    { label: "きじ", num: 50, checked: false },
  ]);

  const [sum, setSum] = useState(0);
  const onChange = (e) => {
    const newAnimals = animals.map((animal) => {
      const newAnimal = { ...animal };
      if (newAnimal.label === e.target.value) {
        newAnimal.checked = !newAnimal.checked;
      }
      return newAnimal;
    });
    setAnimals(newAnimals);
    let val = 0;
    newAnimals
      .filter((animal) => animal.checked)
      .forEach((animal) => (val += animal.num));

    setSum(val);
  };
  return (
    <div>
      {animals.map((animal) => {
        return (
          <div key={animal.label}>
            <input
              id={animal.label}
              type="checkbox"
              value={animal.label}
              onChange={onChange}
            />
            <label htmlFor={animal.label}>
              {animal.label}: {animal.num}匹
            </label>
          </div>
        );
      })}
      <div>合計：{sum}匹</div>
    </div>
  );
};

export default Sample;

とくに単体のときと違いはありませんが、mapなどで新しい配列を作成して、チェックボックスの反転をしたり、
key属性を付与するなどが増えます。

select(プルダウン)

import { useState } from "react";

const Sample = () => {
  const [selected, setSelected] = useState("ごりら");

  const ANIMALS = ["ごりら", "さる", "犬"];

  return (
    <>
      <select value={selected} onChange={(e) => setSelected(e.target.value)}>
        {/* <option selected>aaa</option>ではなく、selectにvalue={selected}とする */}
        {ANIMALS.map((opt) => (
          <option key={opt} value={opt}>
            {opt}
          </option>
        ))}
      </select>
      <div>選択された動物：{selected}</div>
    </>
  );
};

export default Sample;

通常のhtmlの場合、optionタグにselected属性をつけますが、
selectタグに参照する値を設定して、onChangeを設定することでselected属性を変更することができます。
その他は他と同じです。