React 中父子组件间传递表单数据的完整实践指南-js教程-PHP中文网

React 中父子组件间传递表单数据的完整实践指南

本文详解如何在 react 应用中，通过状态提升（lifting state up）或 context api 将 firstsection 的输入值安全、清晰地传递至 secondsection，并提供可运行的代码示例与最佳实践建议。

本文详解如何在 react 应用中，通过状态提升（lifting state up）或 context api 将 firstsection 的输入值安全、清晰地传递至 secondsection，并提供可运行的代码示例与最佳实践建议。

在 React 开发中，跨组件传递用户输入数据是一个高频需求。你当前的结构中，FirstSection 与 SecondSection 是两个独立渲染的组件，且由 App 统一控制显示逻辑（通过 checkSection 状态切换）。此时，最推荐、最符合 React 数据流原则的方案是「状态提升」——将共享状态（如 input1、input2）提升至共同父组件 App 中管理，并通过 props 或 Context 向下分发。

下面以两种主流方式展开说明，均基于你提供的代码结构进行重构优化：

✅ 方式一：状态提升 + Props 传递（简洁直接，推荐初学者使用）

这是最直观、易调试的方式。修改核心逻辑如下：

App.js

import React, { useState } from 'react';
import { FirstSection } from './components/FirstSection';
import { SecondSection } from './components/SecondSection';

function App() {
  const [showSecondSection, setShowSecondSection] = useState(false);
  const [inputValues, setInputValues] = useState({ input1: '', input2: '' });

  const handleContinue = (values) => {
    setInputValues(values);
    setShowSecondSection(true);
  };

  return (
    <div classname="App">
      {showSecondSection ? (
        <secondsection inputvalues="{inputValues}"></secondsection>
      ) : (
        <firstsection oncontinue="{handleContinue}"></firstsection>
      )}
    </div>
  );
}

export default App;

FirstSection.jsx

import { useState } from 'react';

export function FirstSection({ onContinue }) {
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');

  const handleSubmit = () => {
    onContinue({ input1, input2 });
  };

  return (
    
      <input type="text" value="{input1}" onchange="{(e)"> setInput1(e.target.value)}
        placeholder="Enter input 1"
      />
      <input type="text" value="{input2}" onchange="{(e)"> setInput2(e.target.value)}
        placeholder="Enter input 2"
      />
      <button onclick="{handleSubmit}">Continue</button>
    >
  );
}

SecondSection.jsx

export function SecondSection({ inputValues }) {
  return (
    <div>
      <h2>Received Data:</h2>
      <p><strong>Input 1:</strong> {inputValues.input1}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill8476" title="react-pro"><img
														src="https://img.php.cn/upload/skill/000/000/081/179206034644870.jpg" alt="react-pro" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill8476" title="react-pro" class="overflowclass">react-pro</a>
													<p class="overflowclass">你是一位 React 专家，擅长高级 Hook、性能优化、状态管理和现代 React 模式。适用场景：高级 Hook 模式...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill8476" title="react-pro" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      <p><strong>Input 2:</strong> {inputValues.input2}</p>
      <button onclick="{()"> window.history.back()}>← Back</button>
    </div>
  );
}

✅ 优势：无额外依赖、逻辑清晰、便于单元测试；
⚠️ 注意：若组件嵌套层级加深（如 FirstSection → ChildForm → Button），需逐层透传 onContinue，此时可考虑方式二。

✅ 方式二：Context API（适合中大型应用或深层嵌套场景）

当组件树变深，或多个兄弟组件需共享同一份表单状态时，Context 提供更优雅的解耦方案：

// Context.js
import { createContext, useContext, useState } from 'react';

const FormContext = createContext();

export const FormProvider = ({ children }) => {
  const [inputValues, setInputValues] = useState({ input1: '', input2: '' });

  return (
    <formcontext.provider value="{{" inputvalues setinputvalues>
      {children}
    </formcontext.provider>
  );
};

export const useFormContext = () => {
  const context = useContext(FormContext);
  if (!context) throw new Error('useFormContext must be used within FormProvider');
  return context;
};

在 App.js 中包裹 Provider，并分别在 FirstSection 和 SecondSection 中消费：

// App.js（片段）
import { FormProvider } from './Context';

function App() {
  const [showSecondSection, setShowSecondSection] = useState(false);

  return (
    <formprovider><div classname="App">
        {showSecondSection ? <secondsection></secondsection> : <firstsection></firstsection>}
      </div>
    </formprovider>
  );
}

FirstSection 内部调用 setInputValues，SecondSection 直接读取 inputValues —— 实现零 props 穿透。

? 关键注意事项

受控组件必须配 onChange：你原代码中 <input value="{input1}"> 是错误写法（字符串字面量），应为 value={input1} 并绑定 onChange，否则输入无法响应；
避免在 SecondSection 中初始化 state 存储传入值：直接使用 props 或 context 值即可，除非需要二次编辑并保持独立状态；
类型安全建议：搭配 TypeScript 可提前约束 inputValues 结构，防止 undefined 访问；
重置逻辑可选：若用户返回 FirstSection 需清空输入，可在 onClick 回调中重置 input1/input2 状态。