import ReactDOM from 'react-dom'
import React from 'react'

const App = () => {
  return (
    <>
      <h1> お問合せフォーム </h1>
      <form>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            marginBottom: '16px'
          }}
        >
          <label style={{ display: 'block' }} htmlFor="name">
            お名前
          </label>
          <input
            style={{ width: '10em', border: '1px solid #333' }}
            type="text"
            id="name"
            name="customer_name"
          />
          {/* 問題1.メールアドレスの入力欄を準備しよう */}
          <label style={{ display: 'block' }} htmlFor="email">
            メールアドレス
          </label>
          <input
            style={{ width: '15em', border: '1px solid #333' }}
            type="email"
            id="email"
            name="email"
          />
          {/* ここまで */}
          {/* 問題2. メッセージの入力欄を準備しよう */}
          <label style={{ display: 'block' }} htmlFor="message">
            メッセージ
          </label>
          <textarea
            style={{ width: '20em', border: '1px solid #333' }}
            type="text"
            id="message"
            name="message"
          />
          {/* ここまで */}
        </div>
        {/* 問題3. 送信ボタンを準備しよう */}
        <button style={{ width: '100px' }} type="submit">
          送信
        </button>
        {/* ここまで */}
      </form>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

<form>

import ReactDOM from 'react-dom'
import React from 'react'

const App = () => {
  return (
    <>
      <h1> お問合せフォーム </h1>
      <form>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            marginBottom: '16px'
          }}
        >
          <label style={{ display: 'block' }} htmlFor="name">
            お名前
          </label>
          <input
            style={{ width: '10em', border: '1px solid #333' }}
            type="text"
            id="name"
            name="customer_name"
          />
          {/* 問題1.メールアドレスの入力欄を準備しよう */}
          {/* ここまで */}
          {/* 問題2. メッセージの入力欄を準備しよう */}
          {/* ここまで */}
        </div>
        {/* 問題3. 送信ボタンを準備しよう */}
        {/* ここまで */}
      </form>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


見た目を作ろう

完成形を操作してみよう 

useState

イベントハンドラ

import文

stateを定義して、入力値を出力させてみよう

入力値を保持しよう1

入力値を保持しよう2

e.preventDefault()

送信ボタンを押したときの処理を書こう

送信ボタンを押したときの処理を改善しよう

バリデーションを実装しよう1

バリデーションを実装しよう2

Reactで問い合わせフォームを作ろう

「Reactで問い合わせフォームを作ろう」レッスンの総復習クイズです。

見た目を作ろう

まずは必要なスキルを確認しましょう！