🌟
AWS Amplify, reactで入力フォームを作ってみた

2025/03/12に公開
最近、触り始めたAmplify/reactで簡単な入力フォームを作ってみました。
公式のQuickStartのコードをベースにreactのコードを書いております。

 公式QuickstartAmplify公式のQuickStartの「4. Set up local environment」まで実施すると、簡易なTodoアプリが構築できます。
このアプリのApp.tsxを作り直し、入力フォームを作っていきます。

https://docs.amplify.aws/react/start/quickstart/

 問い合わせフォームメールアドレスと問い合わせフォームがある簡素なアウトプットです。（テストなのでとても簡素です）
送信を押すとalertでメッセージが表示されます。
alertで表示されるメールアドレスはuseStateでinputから取得しています。
App.tsx
import { useState } from "react";

function App() {
  const [mail, setMail] = useState("");

  return (
    <main>
      <h1>お問い合わせフォーム</h1>

      <label>メール</label>
      <input 
        type="email" id="mail" name="mail" width="60%"
        onChange={(e) => setMail(e.target.value)}
      />

      <label>お問い合わせ内容</label>
      <textarea name="inquiry" cols={50} rows={10}></textarea>

      <button 
        id="submit_button"
        onClick={ () => alert(mail+" 様"+ "\n" + 'お問い合わせありがとうございます！') }>
        送信
      </button>

    </main>
  );
}

export default App;
見た目が簡素なので、次回はAmplify UIで見た目を整えます。
公式Quickstart

問い合わせフォーム

Discussion
