Reduxへのフォーム追加

前回のレッスンでは、フォームの入力フィールドに単一コンポーネント内でのみ機能するステートを適用できることを学び、空のフォームを作成しました。

では、formタグ内に、情報を入力する各フィールドのマークアップを配置しましょう。最初の入力欄は製品名を担当し、そのマークアップは次のようになります：

<form>
	<p>
		<label htmlFor="productName">名前:</label>
		<input
			id="productName"
			name="productName"
			value={name}
			onChange={onNameChanged}
		/>
	</p>
</form>

次に、製品の説明用の textarea を配置します：

<p>
	<label htmlFor="productDesc">説明:</label>
	<textarea
		id="productDesc"
		name="productDesc"
		value={desc}
		onChange={onDescChanged}
	/>
</p>

残り2つの入力欄（価格と数量用、IDはそれぞれ productPrice と productAmount）のコードを自分で書いてください。

4つの入力欄すべての後、閉じ form タグの前に、保存用のボタンを追加します：

<button type="button">保存</button>

フォームコンポーネントが完成しました。メインページに表示しましょう。そのためにファイル root.jsx を開き、コンポーネントをインポートします：

import { NewProductForm } from '../parts/products/NewProductForm'

そして、hrタグと ProductsListコンポーネントの間に次のように挿入します：

<hr></hr>
<NewProductForm />
<ProductsList />

アプリケーションを起動して、フォームと製品リストを確認しましょう。さらに、index.css にスタイルを追加します：

#main-page {
	max-width: 600px;
}

select,
textarea,
input,
button {
	font-size: 18px;
}

form {
	margin-bottom: 20px;
	border-bottom: 2px solid lightgray;
	padding-bottom: 10px;
}

form p {
	margin: 5px;
}

あなたの学生管理アプリケーションを開いてください。レッスンで示したように、フォームのマークアップを作成してください。

完成した NewStudentForm コンポーネントをメインページの StudentsList の前に追加してください。