React新手求助：如何提升表单组件的State以对接API

状态提升的核心就是把表单的状态和提交逻辑从子组件（Bookingform）移到上层父组件，让父组件统一管理数据，方便后续对接API请求。下面是针对你的代码的具体改造步骤：

1. 创建父组件管理状态与提交逻辑 #

把原Bookingform里的状态、提交逻辑都移到父组件（比如命名为BookingContainer）：

import React, { useState } from 'react';
import Bookingform from './Bookingform';
import { availableTimes, Guests, Occasion } from './constants'; // 导入常量

const BookingContainer = () => {
  // 所有表单状态统一放在父组件
  const [resdate, setResdate] = useState("");
  const [guests, setGuests] = useState("");
  const [occasion, setOccasion] = useState("");
  const [restime, setRestime] = useState("");

  // 提交逻辑移到父组件，后续直接在这里对接API
  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      Reservation_Time: restime,
      Occasion: occasion,
      Guests: guests,
      Reservation_Date: resdate
    };

    // 这里替换成实际API请求，比如fetch/axios
    console.clear();
    console.log(JSON.stringify(data));
    
    // 重置表单状态
    setResdate("");
    setRestime("");
    setGuests("");
    setOccasion("");
    console.log("Form submitted!");
  };

  // 把状态、更新函数、提交函数传给子组件
  return (
    <Bookingform
      resdate={resdate}
      setResdate={setResdate}
      guests={guests}
      setGuests={setGuests}
      occasion={occasion}
      setOccasion={setOccasion}
      restime={restime}
      setRestime={setRestime}
      handleSubmit={handleSubmit}
      availableTimes={availableTimes}
      Guests={Guests}
      Occasion={Occasion}
    />
  );
};

export default BookingContainer;

2. 改造Bookingform子组件 #

子组件不再维护自身状态，完全通过props接收父组件传递的状态和操作函数：

import React from 'react';
import Select from './Select';

const Bookingform = ({
  resdate,
  setResdate,
  guests,
  setGuests,
  occasion,
  setOccasion,
  restime,
  setRestime,
  handleSubmit,
  availableTimes,
  Guests,
  Occasion
}) => {
  return (
    <>
      <div className='BookingForm'>
        <form onSubmit={handleSubmit}>
          <fieldset>
            <div className='Field'>
              {/* 原代码里的<field>是无效标签，替换为<div> */}
              <div>
                <label htmlFor='res-date'>Choose Date</label>
                <input
                  id="res-date"
                  type="date"
                  name='res-date'
                  value={resdate}
                  onChange={(e) => setResdate(e.target.value)}
                />

                <label htmlFor='res-time'>Choose time:</label>
                <Select
                  id="restime"
                  name="restime"
                  value={restime}
                  options={availableTimes}
                  onChange={(e) => setRestime(e.target.value)}
                />

                <label htmlFor="guests">Number of Guests</label>
                <Select
                  id="guests"
                  name='guests'
                  value={guests}
                  options={Guests}
                  onChange={(e) => setGuests(e.target.value)}
                />

                <label htmlFor="occasion">Occasion</label>
                <Select
                  id="occasion"
                  name="occasion"
                  value={occasion}
                  options={Occasion}
                  onChange={(e) => setOccasion(e.target.value)}
                />
              </div>
            </div>
            <button type='submit'>Submit</button>
          </fieldset>
        </form>
      </div>
    </>
  );
};

export default Bookingform;

3. 抽离常量到独立文件 #

把availableTimes、Guests、Occasion这些固定数据单独放在constants.js文件，避免重复定义：

// constants.js
export const availableTimes = [
  {value: "17:00", text: "17:00"},
  {value: "18:00", text: "18:00"},
  {value: "19:00", text: "19:00"},
  {value: "20:00", text: "20:00"},
  {value: "21:00", text: "21:00"},
  {value: "22:00", text: "22:00"},
];

export const Guests = [
  {value: "1", text: "1"},
  {value: "2", text: "2"},
  {value: "3", text: "3"},
  {value: "4", text: "4"},
  {value: "5", text: "5"},
  {value: "6", text: "6"},
  {value: "7", text: "7"},
  {value: "8", text: "8"},
  {value: "9", text: "9"},
];

export const Occasion = [
  {value: "Birthday", text: "Birthday"},
  {value: "Anniversary", text: "Anniversary"},
];

关键说明 #

• 状态提升后，父组件掌握所有表单数据，后续对接API时，直接在handleSubmit里用fetch或axios发送请求即可，无需在子组件处理。
• 子组件变成受控组件，所有输入值由父组件state控制，保证数据一致性。
• 修复了原代码里的无效HTML标签<field>，替换为标准的<div>。

内容的提问来源于stack exchange，提问作者Oh Wire