React 表单状态管理：使用 useReducer 在多个组件间共享状态

import React, { useReducer, useState } from 'react';
import BookingForm from './BookingForm';

function Main() {
  // 初始化可用的时间
  function initializeTimes() {
    return [
      '17:00',
      '18:00',
      '19:00',
      '20:00',
      '21:00',
      '22:00'
    ];
  }

  // 定义 reducer 函数，处理状态更新
  function updateTimes(state, action) {
    switch (action.type) {
      case 'update_times':
        return action.availableTimes; // 根据 action 更新 availableTimes
      default:
        return state; // 默认返回当前 state
    }
  }

  // 使用 useReducer hook 管理 availableTimes 状态
  const [availableTimes, dispatch] = useReducer(updateTimes, initializeTimes());

  // 定义表单状态
  const [date, setDate] = useState('');
  const [time, setTime] = useState('17:00');
  const [guests, setGuests] = useState(1);
  const [occasion, setOccasion] = useState('Birthday');

  // 处理日期选择
  const handleDateChange = (selectedDate) => {
    setDate(selectedDate); // 更新日期状态
    dispatch({ type: 'update_times', availableTimes: initializeTimes() }); // 触发时间更新
  };

  // 处理表单提交
  const handleFormSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted:', { date, time, guests, occasion });
  };

  const showBookingForm = true; // 确保 BookingForm 显示

  return (
    <div>
      {showBookingForm && (
        <BookingForm
          availableTimes={availableTimes}
          handleDateChange={handleDateChange}
          date={date}
          setDate={setDate}
          time={time}
          setTime={setTime}
          guests={guests}
          setGuests={setGuests}
          occasion={occasion}
          setOccasion={setOccasion}
          handleFormSubmit={handleFormSubmit}
        />
      )}
      {/* Rest of your Main component code */}
    </div>
  );
}

export default Main;

import React from 'react';

function BookingForm({ availableTimes, handleDateChange, date, setDate, time, setTime, guests, setGuests, occasion, setOccasion, handleFormSubmit }) {

  return (
    <form
      style={{ display: 'grid', maxWidth: '200px', gap: '20px' }}
      onSubmit={handleFormSubmit}
    >
      <label htmlFor="res-date">Choose date</label>
      <input
        type="date"
        id="res-date"
        value={date}
        onChange={(e) => handleDateChange(e.target.value)}
      />

      <label htmlFor="res-time">Choose time</label>
      <select
        id="res-time"
        value={time}
        onChange={(e) => setTime(e.target.value)}
      >
        {availableTimes.map((availableTime) => (
          <option key={availableTime} value={availableTime}>
            {availableTime}
          </option>
        ))}
      </select>

      <label htmlFor="guests">Number of guests</label>
      <input
        type="number"
        placeholder="1"
        min="1"
        max="10"
        id="guests"
        value={guests}
        onChange={(e) => setGuests(e.target.value)}
      />
      <label htmlFor="occasion">Occasion</label>
      <select
        id="occasion"
        value={occasion}
        onChange={(e) => setOccasion(e.target.value)}
      >
        <option value="Birthday">Birthday</option>
        <option value="Anniversary">Anniversary</option>
      </select>
      <input type="submit" value="Make Your reservation" />
    </form>
  );
}

export default BookingForm;