クエスト8：フォームと制御コンポーネント

今回の課題

名前と年齢を入力して「登録」ボタンを押すとアラートが出るフォームを完成させよう！

📖 解説を見る

📝 React でフォームを管理する

React では 制御コンポーネント方式でフォームを管理します。
state と input を同期させることで常に最新の入力値を把握できます。

ヒントを見る

onChange={(e) => setName(e.target.value)} と onChange={(e) => setAge(e.target.value)} を使おう

📄 見本

「答えを見る」を押すと、お手本のプレビューとコードが出ます。

💻 コードエディタ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React</title>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
const { useState } = React;

function Form() {
  const [name, setName] = useState('');
  const [age, setAge] = useState('');

function handleSubmit(e) {
    e.preventDefault();
    alert(`${name}（${age}歳）を登録しました！`);
  }

return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>名前：</label>
        <input
          type="text"
          value={name}
          onChange={/* ここを書こう */}
          placeholder="名前を入力"
        />
      </div>
      <div>
        <label>年齢：</label>
        <input
          type="number"
          value={age}
          onChange={/* ここを書こう */}
          placeholder="年齢を入力"
        />
      </div>
      <button type="submit">登録</button>
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Form />);
  </script>
</body>
</html>

あなたの出力

クエスト8：フォームと制御コンポーネント

クエスト8：フォームと制御コンポーネント

れんしゅうもんだい