React中如何实现子组件向父组件传值？多页表单场景实践

核心思路 #

把所有表单数据的状态统一放在父组件管理，子组件仅负责渲染输入控件并将用户输入同步到父组件的状态中，这样父组件就能直接拿到完整的表单数据用于API提交。

具体实现步骤（结合MUI Checkout模板） #

1. 父组件初始化全局表单状态 #

在父组件（比如Checkout组件）中，用useState定义一个包含所有表单字段的状态对象，覆盖所有子页面需要收集的数据：

import { useState } from 'react';

export default function Checkout() {
  // 初始化全局表单状态，包含所有子页面的字段
  const [formData, setFormData] = useState({
    // 个人信息
    firstName: '',
    lastName: '',
    email: '',
    // 配送地址
    address: '',
    city: '',
    zipCode: '',
    // 支付信息
    cardNumber: '',
    expiryDate: '',
    cvv: ''
  });

  // 统一的状态更新函数
  const handleInputChange = (fieldName, value) => {
    setFormData(prev => ({
      ...prev,
      [fieldName]: value
    }));
  };

  // 表单提交逻辑
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 直接用formData构造请求体发送API
      const response = await fetch('你的API接口地址', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
      });
      const result = await response.json();
      // 处理提交成功逻辑，比如跳转、提示
      console.log('提交成功', result);
    } catch (error) {
      // 处理提交错误
      console.error('提交失败', error);
    }
  };

  // 步骤切换逻辑（示例）
  const [currentStep, setCurrentStep] = useState(1);

  return (
    <form onSubmit={handleSubmit}>
      {/* 根据当前步骤渲染对应子组件，传递状态和更新函数 */}
      {currentStep === 1 && (
        <PersonalInfoForm 
          formData={formData} 
          onInputChange={handleInputChange} 
        />
      )}
      {currentStep === 2 && (
        <AddressForm 
          formData={formData} 
          onInputChange={handleInputChange} 
        />
      )}
      {currentStep === 3 && (
        <PaymentForm 
          formData={formData} 
          onInputChange={handleInputChange} 
        />
      )}

      {/* 步骤切换按钮 */}
      <button 
        type="button" 
        disabled={currentStep === 1}
        onClick={() => setCurrentStep(prev => prev - 1)}
      >
        上一步
      </button>
      {currentStep === 3 ? (
        <button type="submit">提交表单</button>
      ) : (
        <button 
          type="button" 
          onClick={() => setCurrentStep(prev => prev + 1)}
        >
          下一步
        </button>
      )}
    </form>
  );
}

2. 子组件绑定状态与更新函数 #

以AddressForm子组件为例，接收父组件传递的状态和更新函数，将输入控件与对应字段绑定：

import { TextField, Grid } from '@mui/material';

export default function AddressForm({ formData, onInputChange }) {
  return (
    <Grid container spacing={3}>
      <Grid item xs={12}>
        <TextField
          required
          fullWidth
          label="详细地址"
          value={formData.address}
          onChange={(e) => onInputChange('address', e.target.value)}
        />
      </Grid>
      <Grid item xs={12} sm={6}>
        <TextField
          required
          fullWidth
          label="城市"
          value={formData.city}
          onChange={(e) => onInputChange('city', e.target.value)}
        />
      </Grid>
      <Grid item xs={12} sm={6}>
        <TextField
          required
          fullWidth
          label="邮政编码"
          value={formData.zipCode}
          onChange={(e) => onInputChange('zipCode', e.target.value)}
        />
      </Grid>
    </Grid>
  );
}

3. 提交时直接使用父组件状态 #

父组件的formData已经同步了所有子组件的输入值，提交时直接将其转为JSON格式发送给API即可。

进阶优化建议 #

• 若表单字段多、逻辑复杂，可改用useReducer管理状态，让更新逻辑更清晰。
• 表单验证可在子组件实时处理（如输入格式校验），也可在父组件提交前统一校验所有字段。
• 可为handleInputChange添加字段名校验，避免错误字段导致状态更新异常。

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