useState

イベントハンドラ

import文

import ReactDOM from 'react-dom'
// 問題1. useStateを使う準備をしよう
import React, { useState } from 'react'
//ここまで

const App = () => {
  // 問題2. 入力値のstateを定義しよう
  const [customerName, setCustomerName] = useState('')
  const [email, setEmail] = useState('')
  const [message, setMessage] = useState('')
  // ここまで

  return (
    <>
      <h1> お問合せフォーム </h1>
      <form>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            marginBottom: '16px'
          }}
        >
          {/* 問題3. 入力値をログに出力してみよう */}
          <label style={{ display: 'block' }} htmlFor="name">
            お名前
          </label>
          <input
            style={{ width: '10em', border: '1px solid #333' }}
            type="text"
            id="name"
            name="customer_name"
            onChange={(e) => console.log(e.target.value)}
          />
          <label style={{ display: 'block' }} htmlFor="email">
            メールアドレス
          </label>
          <input
            style={{ width: '15em', border: '1px solid #333' }}
            type="email"
            id="email"
            name="email"
            onChange={(e) => console.log(e.target.value)}
          />
          <label style={{ display: 'block' }} htmlFor="message">
            メッセージ
          </label>
          <textarea
            style={{ width: '20em', border: '1px solid #333' }}
            type="text"
            id="message"
            name="message"
            onChange={(e) => console.log(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'
// 問題1. useStateを使う準備をしよう
import React from 'react'
//ここまで

const App = () => {
  // 問題2. 入力値のstateを定義しよう
  // ここまで

  return (
    <>
      <h1> お問合せフォーム </h1>
      <form>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            marginBottom: '16px'
          }}
        >
          {/* 問題3. 入力値をログに出力してみよう */}
          <label style={{ display: 'block' }} htmlFor="name">
            お名前
          </label>
          <input
            style={{ width: '10em', border: '1px solid #333' }}
            type="text"
            id="name"
            name="customer_name"
          />
          <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 />)


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

完成形を操作してみよう

<form>

見た目を作ろう

入力値を保持しよう1

入力値を保持しよう2

e.preventDefault()

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

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

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

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

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

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

Reactコース

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

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