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用に変換したり、アプリケーション内で持ちたい形に変換したいケースなど、実際には色々と面倒そうな場面が想定されますが、以上、基本的なフォームの作り方となります。