主页 / 问题 / 1557822
Accepted
rabbit
Asked:2023-12-18 14:26:24 +0000 UTC2023-12-18 14:26:24 +0000 UTC

将数据从组件传递到反应组件

  • 772

我有使用两个独立组件的反应代码。单击第一个组件中的按钮时，我隐藏当前组件并显示另一个组件。但我也想将一些值从第一个组件（从INPUTS）传递到第二个组件。请告诉我该怎么做？这是代码：

应用程序.js

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

function App() {
  const [checkSection, setSection] = useState(false);
  const showSecondSection= () => setSection(true);
  
  return (
    <div className="App">
        {checkSection ? <SecondSection /> : <FirstSection onClick={showSecondSection} />}
    </div>
  );
}

export default App;

第一节.jsx

export function FirstSection({onClick}) {
    return(
        <>
         <input type="text" value="{input1}" />
         <input type="text" value="{input2}" />
         <button onClick={onClick}>Continue</button>
        </>
    )
}

第二节.jsx

export function SecondSection() {
    return(
        <>
         <p>{input1}, {input2}</p> <== Сюда я хочу передать данные из первого компонента
        </>
    )
}
javascript

1 个回答

  1. Best Answer
    import React from 'react';
import { useState } from 'react';
import { FirstSection} from './components/FirstSection';
import { SecondSection} from './components/SecondSection';

function App() {
  const [checkSection, setSection] = useState(false);
  const showSecondSection= () => setSection(true);
  const [firstInput, setFirstInput] = useState("");
  const [secondInput, setSecondInput] = useState("");
  
  return (
    <div className="App">
        {checkSection ? 
          <SecondSection 
            firstInput={firstInput}
            secondInput={secondInput}
          /> : 
          <FirstSection 
            firstInput={firstInput}
            secondInput={secondInput}
            setFirstInput={setFirstInput}
            setSecondInput={setSecondInput}
            onClick={showSecondSection} 
          />
         }
    </div>
  );
}

export default App;

    第一节组件

    export function FirstSection({onClick, firstInput, setFirstInput, secondInput, setSecondInput }) {
    return(
        <>
         <input type="text" value={firstInput} onChange={e => setFirstInput(e.target.value)}/>
         <input type="text" value={secondInput} onChange={e => setSecondInput(e.target.value)} />
         <button onClick={onClick}>Continue</button>
        </>
    )
}

    第二部分组件

    export function SecondSection({ firstInput, secondInput }) {
    return(
        <>
         <p>{firstInput}, {secondInput}</p>
        </>
    )
}

    游戏代码

    • 1

相关问题