React非Redux场景下，如何将子组件状态传递给容器组件？

让容器组件负责管理核心状态和业务逻辑，子组件专注于UI渲染和用户交互，这种受控组件的设计模式能让你的应用状态流向更清晰，代码也更容易维护和调试。

不用Redux的话，最直接也最优雅的方式就是通过props传递回调函数，让子组件在表单状态变化时调用这些回调，把数据“递”回给容器组件。下面给你具体的实现方案，结合你的场景来梳理：

具体实现步骤 #

1. 容器组件：托管状态+定义回调 #

在容器组件里初始化表单的主状态，然后写好接收子组件数据的回调函数，以及最终的提交逻辑：

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

function ParentContainer() {
  // 容器存储所有表单状态
  const [formData, setFormData] = useState({
    username: '',
    email: ''
  });

  // 回调函数：接收子组件传来的字段和对应值
  const handleFormUpdate = (field, value) => {
    setFormData(prevState => ({
      ...prevState,
      [field]: value
    }));
  };

  // 提交逻辑放在容器，这里可以直接调用API
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('准备提交的表单数据:', formData);
    // 调用API的逻辑写在这里，比如 fetch('/api/submit', { method: 'POST', body: JSON.stringify(formData) })
  };

  return (
    <div className="container">
      <h2>用户信息表单</h2>
      {/* 把状态和回调传给子组件 */}
      <ChildForm 
        currentData={formData}
        onUpdate={handleFormUpdate}
        onSubmit={handleSubmit}
      />
    </div>
  );
}

export default ParentContainer;

2. 子组件：受控渲染+触发回调 #

子组件不再自己维护状态，完全依赖容器传过来的状态值，在用户输入时调用父组件的回调，把新值传回去：

import React from 'react';

function ChildForm({ currentData, onUpdate, onSubmit }) {
  return (
    <form onSubmit={onSubmit}>
      <div className="form-group">
        <label>用户名</label>
        <input
          type="text"
          value={currentData.username}
          onChange={(e) => onUpdate('username', e.target.value)}
          placeholder="请输入用户名"
        />
      </div>
      <div className="form-group">
        <label>邮箱</label>
        <input
          type="email"
          value={currentData.email}
          onChange={(e) => onUpdate('email', e.target.value)}
          placeholder="请输入邮箱"
        />
      </div>
      <button type="submit" className="submit-btn">提交</button>
    </form>
  );
}

export default ChildForm;

额外优化小技巧 #

• 如果表单字段很多，可以简化回调逻辑，让子组件直接传递事件对象，容器组件统一解析：

  // 容器的回调改成这样
  const handleFormUpdate = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  // 子组件的input加上name属性，直接传事件
  <input
    type="text"
    name="username"
    value={currentData.username}
    onChange={handleFormUpdate}
  />
  

• 如果你的组件层级比较深（比如子组件还有子组件），可以用React的useContext来封装状态和回调，避免层层传递props；但如果只是简单的父子组件，直接传props就足够简洁高效了。

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