Reactで作るフォームの基本

Reactで基本的なフォームを作る際のパターンを紹介していきます。

テキスト

まずは、基本的なテキスト入力フォームからです。 これは、入力値を保管するstateと、onChangeでstateを更新するイベントハンドラを組み合わせて実装できます。

  const [name, setName] = useState('Taro');
  const [age, setAge] = useState('20')

  const handleChangeName = e => setName(e.target.value);
  const handleChangeAge = e => setAge(e.target.value);
    return(
      <>
        <h1>My Name is {name}. I'm {age} years old.</h1>
        <input type="text" value={name} placeholder="Input your name" onChange={handleChangeName}/>
        <input type="text" value={age} placeholder="Input your age" onChange={handleChangeAge}/>
      </>
    )  

ラジオボタン

ラジオボタンの実装はcheckedの値を明示的に判定することが必要です。

  const [value, setValue] = useState('rock');
  const handleChange = e => setValue(e.target.value);

  return(
    <>
      <h1>Your Favorite Genre</h1>
      <p>I like {value}.</p>

      <label htmlFor="rock">
        Rock
        <input
          id="rock"
          type="radio"
          value="rock"
          onChange={handleChange}
          checked={value === 'rock'}
          />
      </label>

      <label htmlFor="jazz">
        Jazz
        <input
          id="jazz"
          type="radio"
          value="jazz"
          onChange={handleChange}
          checked={value === 'jazz'}
          />
      </label>

      <label htmlFor="classic">
        Classic
        <input
          id="classic"
          type="radio"
          value="classic"
          onChange={handleChange}
          checked={value === 'classic'}
          />
      </label>
    </>

チェックボックス

チェックボックスは、複数選択になるので、配列で保持する形が良いと思います。 chekedの判定は、includesメソッドで行ます。

values配列に、すでに値が含まれていた場合は、イベントが発火した際は、OFFにしたと判断し、イベントの発行元の値を取り除いた配列を作り直し、そうで無い場合は、ONにしたと判断し、イベント発行元の値を末尾に追加した配列を作り直します。

  const [value, setValue] = useState(['javascript']);

  const handleChange = e => {
    if (value.includes(e.target.value)) {
      setValue(value.filter(item => item !== e.target.value));
    } else {
      setValue([...value, e.target.value]);
    }
  }

  return(
    <>
      <h1>Your Favaorite Language</h1>
      <p>I like {value.join(', ')}</p>

      <label htmlFor="php">
        PHP
        <input 
          id="php"
          type="checkbox"
          value="php"
          onChange={handleChange}
          checked={value.includes('php')}
        />
      </label>

      <label htmlFor="golang">
        GO
        <input 
          id="golang"
          type="checkbox"
          value="golang"
          onChange={handleChange}
          checked={value.includes('golang')}
        />
      </label>

      <label htmlFor="javascript">
        JavaScript
        <input 
          id="javascript"
          type="checkbox"
          value="javascript"
          onChange={handleChange}
          checked={value.includes('javascript')}
        />
      </label>

    </>
  )

セレクトボックス

セレクトボックスは、以下のように セレクトタグのvalueに値を指定します。

  const [value, setValue] = useState('beer');
  const handleChange = e => setValue(e.target.value);

  return(
    <>
      <h1>Your Favaorite Liquor</h1>
      <p>I like {value}</p>
      <select value={value} onChange={handleChange}>
        <option value="beer">Beer</option>
        <option value="wine">Wine</option>
        <option value="whisky">Whisky</option>
      </select>
    </>
  )

以下に動作するものを貼っておきます。

Formに入力した値を元にAPI用に変換したり、アプリケーション内で持ちたい形に変換したいケースなど、実際には色々と面倒そうな場面が想定されますが、以上、基本的なフォームの作り方となります。