React Forms - チェックボックス

1. チェックボックス

チェックボックスの場合、ステートを制御するには value 属性の代わりに checked 属性を使用します。

ここでは useState フックを使用して、テキストエリア（※原文ママ）の値を管理します。
handleChange 関数内では、e.target.type プロパティを使用して、現在のインプットがチェックボックスであるかどうかを判定します。

1.1 実装例

Reactでは checked 属性を使用してチェックボックスを制御します。

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  const [inputs, setInputs] = useState({});

  const handleChange = (e) => {
    const target = e.target;
    // インプットのタイプが checkbox の場合は checked を、それ以外は value を取得
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;
    setInputs(values => ({...values, [name]: value}))
  }

  const handleSubmit = (event) => {
    let fillings = '';
    if (inputs.tomato) fillings += 'トマト';
    if (inputs.onion) {
      if (inputs.tomato) fillings += ' と ';
      fillings += '玉ねぎ';
    }
    if (fillings == '') fillings = 'トッピングなし';
    
    alert(`${inputs.firstname} さんは ${fillings} 入りのハンバーガーを希望しています`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>名前:
      <input 
        type="text" 
        name="firstname" 
        value={inputs.firstname || ""} 
        onChange={handleChange}
      />
      </label>

      <p>ハンバーガーのトッピングを選択:</p>
      <label>トマト:
      <input 
        type="checkbox" 
        name="tomato" 
        checked={inputs.tomato || false} 
        onChange={handleChange}
      />
      </label>
      <label>玉ねぎ:
        <input 
          type="checkbox" 
          name="onion" 
          checked={inputs.onion || false} 
          onChange={handleChange}
        />
      </label>
      <button type="submit">送信</button>
    </form>
  )
}

createRoot(document.getElementById('root')).render(
  <MyForm />
);

2. 初期値の設定 (Initial Values)

上記の例の入力フィールドに初期値を設定するには、useState のオブジェクトに適切なキーと値を記述します。

2.1 実装例

各インプットフィールドに初期値を設定する場合のコードです。

function MyForm() {
  const [inputs, setInputs] = useState({
    firstname: 'John',
    tomato: true,
    onion: false
  });

  // ...残りのロジックは同様
}