React切换组件时如何实现组件间输入值传递？

要实现点击按钮切换组件并传递输入框值的需求，核心方案是状态提升——将输入框的状态托管到父组件App.js中，让两个子组件通过props共享状态数据。以下是修改后的完整代码：

修改后的App.js #

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

function App() {
  // 父组件托管输入框状态
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');
  const [showSecondSection, setShowSecondSection] = useState(false);

  // 切换到第二个组件的方法
  const handleSwitchSection = () => {
    setShowSecondSection(true);
  };

  return (
    <div className="App">
      {showSecondSection ? (
        // 把状态传给第二个组件
        <SecondSection input1={input1} input2={input2} />
      ) : (
        // 把状态和更新方法传给第一个组件
        <FirstSection
          input1={input1}
          input2={input2}
          setInput1={setInput1}
          setInput2={setInput2}
          onSwitch={handleSwitchSection}
        />
      )}
    </div>
  );
}

export default App;

修改后的FirstSection.jsx #

export function FirstSection({ input1, input2, setInput1, setInput2, onSwitch }) {
  return (
    <>
      {/* 受控组件：绑定value和onChange，实时更新父组件状态 */}
      <input
        type="text"
        value={input1}
        onChange={(e) => setInput1(e.target.value)}
        placeholder="输入内容1"
      />
      <input
        type="text"
        value={input2}
        onChange={(e) => setInput2(e.target.value)}
        placeholder="输入内容2"
      />
      <button onClick={onSwitch}>Continue</button>
    </>
  );
}

修改后的SecondSection.jsx #

export function SecondSection({ input1, input2 }) {
  return (
    <>
      <p>收到的输入：{input1}, {input2}</p>
    </>
  );
}

关键说明 #

• 状态提升：将原本在FirstSection里的输入状态移到父组件，确保切换组件时数据不会丢失
• 受控组件：输入框通过value绑定父组件状态，onChange触发状态更新，保证输入内容和状态实时同步
• Props传递：父组件把状态和更新方法通过props传给FirstSection，把状态传给SecondSection，实现组件间的数据共享

内容的提问来源于stack exchange，提问作者s.kuznetsov