React RouterにおけるURLパラメータによるデータの記録と編集

私たちのアプリケーションは、ストレージから個々の商品ごとにデータを読み込めるようになりました。このレッスンでは、URLパラメータを使用した商品情報の追加と編集機能の実装を開始します。

データを記録または変更するために、再びFormコンポーネントを使用します。まずは、product.jsxを開き、最後の段落の後に商品データを編集するためのボタンを追加しましょう（ファイルにFormをインポートすることを忘れないでください）：

routes/product.jsx<Form action="edit">
  <button type="submit">編集</button>
</Form>

これで商品ページに編集ボタンができました。次に、このボタンをクリックすると、データを入力できるフォームページにリダイレクトされるようにします。そのために、products/:productId/editという別のルートを作成します。まずそのためのコンポーネントを作成しましょう。

それでは、routesフォルダ内に新しいファイルedit.jsxを作成します。ここには、入力用のフィールドname、cost、amountと保存ボタンを持つフォームを配置します。これらはすべてEditProductコンポーネント内に記述します。name属性は必ず記述してください。これらは次のレッスンで必要になります：

routes/edit.jsximport { Form } from 'react-router-dom';

function EditProduct() {
  return (
    <Form method="post" id="product-form">
      <div>
        <span>名前：</span>
        <input placeholder="名前" type="text" name="name" />
      </div>
      <div>
        <span>価格：</span>
        <input placeholder="価格" type="text" name="cost" />
      </div>
      <div>
        <span>数量：</span>
        <input placeholder="数量" type="text" name="amount" />
      </div>
      <p>
        <button type="submit">保存</button>
      </p>
    </Form>
  );
}

export default EditProduct;