Reactjs 在不同组件中使用输入状态

我想使用React中另一个组件的输入状态。我有一个组件，在这个组件中，我有一个表单

import React, { useState } from "react";
import { Form } from "react-bootstrap";

function Jumbotron() {
  const [inputFrom, setInputFrom] = useState("");
  return (
    <Form className="shadow p-3 mb-5">
      <Form.Group controlId="formGroupFrom">
        <Form.Label className="form-subtitle">Title</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter input"
          onChange={(event) => setInputFrom(event.target.value)}
        />
      </Form.Group>
    </Form>
  );
}

export default Jumbotron;

import React，{useState}来自“React”；
从“react bootstrap”导入{Form}；
函数Jumbotron（）{
常量[inputFrom，setInputFrom]=useState（“”）；
返回(
标题
setInputFrom（event.target.value）}
/>
);
}
导出默认的Jumbotron；

所以我想在其他组件中使用'inputFrom'，我只想展示它。我会分几个部分来做，所以你能给我一个建议吗

import React from "react";

    import { Container } from "react-bootstrap";
    function Checkout() {
      return (
            <Container>
              <div className="shipment-info">
                <div className="basic">
                  <div className="col-2 title">From</div>
                  <div className="col-4 info">{inputFrom}</div>
                </div>
              </div>
            </Container>
      );
    }
    
    export default Checkout;

从“React”导入React；
从“react bootstrap”导入{Container}；
函数签出（）{
返回(
从…起
{inputFrom}
);
}
导出默认签出；

您可以像这样将道具传递给另一个组件

<NextComponent propYouWantToPass={inputFrom} />

并在下一个组件中使用它，如props.propYouWantToPass，假设您在下一个组件设置props中获得了props作为参数

const NextComponent = (props) => {

return(
<View>
<Text>{props.propYouWantToPass}</Text>
</View>
)    
}

const NextComponent=（道具）=>{
返回(
{props.propYouWantToPass}
)    
}

正如其他人已经说过的，如果您计划在

Jumbotron

组件中使用

Checkout

组件作为孩子。 解决方案很简单，您只需将

inputForm

作为prop传递给

Checkout

，并从

Jumbotron

可能是这样的：

import React, { useState } from "react";
import { Form } from "react-bootstrap";
import { Checkout } from "./Checkout";

function Jumbotron() {
  const [inputFrom, setInputFrom] = useState("");
  return (
   <>
    <Form className="shadow p-3 mb-5">
      <Form.Group controlId="formGroupFrom">
        <Form.Label className="form-subtitle">Title</Form.Label>
        <Form.Control
          type="text"
          placeholder="Enter input"
          onChange={(event) => setInputFrom(event.target.value)}
        />
      </Form.Group>
    </Form>
{/* <-- give any name instead "inputData" */}
    <Checkout inputData={inputForm} /> 
   </>
  );
}

export default Jumbotron;

import React，{useState}来自“React”；
从“react bootstrap”导入{Form}；
从“/Checkout”导入{Checkout}；
函数Jumbotron（）{
常量[inputFrom，setInputFrom]=useState（“”）；
返回(
标题
setInputFrom（event.target.value）}
/>
{/*您可以将状态作为道具传递给子组件。您想将
组件放置在何处？它们是兄弟组件吗？它们是两个不同的组件。Jumbotron中有一个输入字段，在我获取该字段后，我重定向到另一个页面，并希望在那里使用输入。我们似乎彼此不了解。想象一下您的app作为React元素树。您希望将
签出
（相对于
Jumbotron
）放在树中的何处？