e.preventDefault()

import ReactDOM from 'react-dom'
import React, { useState } from 'react'

const App = () => {
  const [customerName, setCustomerName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')

  const handleSubmit = (e) => {
    // 問題3. デフォルトの動作をキャンセルしよう
    e.preventDefault()
    // ここまで
    // 問題1. 送信完了のメッセージを表示する処理を書こう
    alert(`${customerName}さん、メッセージが送信されました！`)
    // ここまで
  }

  return (
    <>
      <h1> お問合せフォーム </h1>
      {/* 問題2. 送信ボタンに処理を追加しよう */}
      <form onSubmit={handleSubmit}>
        {/* ここまで */}
        <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"
            value={customerName}
            onChange={(e) => setCustomerName(e.target.value)}
          />
          <label style={{ display: 'block' }} htmlFor="email">
            メールアドレス
          </label>
          <input
            style={{ width: '15em', border: '1px solid #333' }}
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <label style={{ display: 'block' }} htmlFor="message">
            メッセージ
          </label>
          <textarea
            style={{ width: '20em', border: '1px solid #333' }}
            type="text"
            id="message"
            name="message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
        </div>
        <button style={{ width: '100px' }} type="submit">
          送信
        </button>
      </form>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

import ReactDOM from 'react-dom'
import React, { useState } from 'react'

const App = () => {
  const [customerName, setCustomerName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')

  const handleSubmit = (e) => {
    // 問題3. デフォルトの動作をキャンセルしよう
    // ここまで
    // 問題1. 送信完了のメッセージを表示する処理を書こう
    // ここまで
  }

  return (
    <>
      <h1> お問合せフォーム </h1>
      {/* 問題2. 送信ボタンに処理を追加しよう */}
      <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"
            value={customerName}
            onChange={(e) => setCustomerName(e.target.value)}
          />
          <label style={{ display: 'block' }} htmlFor="email">
            メールアドレス
          </label>
          <input
            style={{ width: '15em', border: '1px solid #333' }}
            type="email"
            id="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
          <label style={{ display: 'block' }} htmlFor="message">
            メッセージ
          </label>
          <textarea
            style={{ width: '20em', border: '1px solid #333' }}
            type="text"
            id="message"
            name="message"
            value={message}
            onChange={(e) => setMessage(e.target.value)}
          />
        </div>
        <button style={{ width: '100px' }} type="submit">
          送信
        </button>
      </form>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


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

完成形を操作してみよう

<form>

見た目を作ろう

useState

イベントハンドラ

import文

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

入力値を保持しよう1

入力値を保持しよう2

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

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

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

Reactでインタラクティブな問い合わせフォームを作成します。
state管理やフォームのハンドリング、バリデーションの実装方法を学びます。

世界的にも人気なReactを使って、Webアプリケーションの作成について学んでいきます

Reactコース

【実践】最低限の知識を使って簡単なアプリを作ってみよう🚸

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