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

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

  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"
            // 問題2. stateをinputタグに表示しよう
            value={customerName}
            // ここまで
            // 問題1. 入力値でstateを更新しよう
            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"
          />
          <label style={{ display: 'block' }} htmlFor="message">
            メッセージ
          </label>
          <textarea
            style={{ width: '20em', border: '1px solid #333' }}
            type="text"
            id="message"
            name="message"
          />
        </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('')

  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"
            // 問題2. stateをinputタグに表示しよう
            // ここまで
            // 問題1. 入力値でstateを更新しよう
            // ここまで
          />
          <label style={{ display: 'block' }} htmlFor="email">
            メールアドレス
          </label>
          <input
            style={{ width: '15em', border: '1px solid #333' }}
            type="email"
            id="email"
            name="email"
          />
          <label style={{ display: 'block' }} htmlFor="message">
            メッセージ
          </label>
          <textarea
            style={{ width: '20em', border: '1px solid #333' }}
            type="text"
            id="message"
            name="message"
          />
        </div>
        <button style={{ width: '100px' }} type="submit">
          送信
        </button>
      </form>
    </>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


入力値を保持しよう1

完成形を操作してみよう 

<form>

見た目を作ろう

useState

import文

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

入力値を保持しよう2

e.preventDefault()

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

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

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

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

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

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

入力値を保持しよう1

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