Reduxへのフォーム追加

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

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

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

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

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

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

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

products/NewProductForm.jsx<button type="button">保存</button>

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

app/root.jsximport { NewProductForm } from '../parts/products/NewProductForm'

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

app/root.jsx<hr></hr>
<NewProductForm />
<ProductsList />

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

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;
}