Reduxでのフォームへの変更の適用

このレッスンでは、製品追加フォームへの販売者情報の表示に関する作業を完了します。そのために、フォームのマークアップを少し変更する必要があります。

製品アプリケーションを開き、その中のファイルNewProductForm.jsxを開きます。return文の前に、販売者を選択するためのドロップダウンリストのマークアップを追加するコードの一部を追加しましょう。mapを使用した標準的な方法で実装します：

const sellersList = sellers.map((seller) => (
	<option key={seller.id} value={seller.id}>
		{seller.name}
	</option>
))

そして、実際のマークアップに変更を加えます。そのために、フォーム内の最初と2番目の段落（製品名と製品説明のマークアップブロックの間）に、以下のマークアップを含む段落を挿入します：

<p>
	<label htmlFor="prodSeller">Seller:</label>
	<select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
		<option value=""></option>
		{sellersList}
	</select>
</p>

これで、アプリケーションを起動できます。追加フォームに販売者のリストが表示されるようになりました。フォームにデータを入力し、その中から1人を選択して、保存ボタンをクリックしてみましょう。Redux DevToolsを確認すると、変更が確認できます - 新しく追加された製品には、sellerプロパティが追加され、値として選択した販売者のidが設定されています。また、Stateタブにはproductsとsellersの2つのスライスが表示されるようになりました。

あなたの学生アプリケーションを開いてください。ファイルNewStudentForm.jsxで、レッスンで示したように、mapを使用して教員の氏名を含むドロップダウンリストteachersListを作成してください。

マークアップを変更し、教員のドロップダウンリストを表示するための別のブロックを追加してください。

あなたのアプリケーションを起動してください。学生追加フォームに、前のタスクで作成した教員のドロップダウンリストが表示されるはずです。