加载下一页时如何从上一页获取输入字段的数据？答案

【问题标题】：How to get data of input fields from previous page when next page is loaded?加载下一页时如何从上一页获取输入字段的数据？
【发布时间】：2021-11-22 13:36:35
【问题描述】：

当点击“搜索”时，下一页由以下代码加载。

import React from "react";
import { Link } from "react-router-dom";

function name(){
return(
 <div className="search">
    <input type="text"placeholder="city name"></input>
    <input type="text"placeholder="number of people"></input>
    <p><Link to="/nextpage">Search</Link</p>
</div>
)
}

我想获取这些输入字段的数据以获取 api，使用该数据在下一页制作卡片。怎么做？

【问题讨论】：

可以使用“历史”拉取url的查询字符串参数
可以通过params传递。这是一个很好的答案stackoverflow.com/a/30115524/3508399

标签： reactjs react-native react-hooks react-router

【解决方案1】：

以下是您如何实现此目的的总体思路。您需要将表单输入（在您的情况下为城市和人数）存储在应用程序状态中。您可以使用useState hook 来做到这一点。现在，此状态可以由您的第一个组件（呈现输入字段的组件）管理并由第二个组件（将显示值的组件）访问。

由于两个组件都需要访问这些值，因此您应该将状态存储在父组件中（请参阅lifting state up）。在我的示例中，我使用了App，它处理路由并呈现FirstPage 和SecondPage。状态值和更改它的方法作为道具传递。

以下是在App 组件中初始化状态的方法：

const [city, setCity] = useState(null);
const [peopleCount, setPeopleCount] = useState(null);

city 是值，setCity 是一个可以修改状态的函数。当用户对输入进行更改时，我们将调用setCity，如下所示：

export const FirstPage = ({ city, setCity, peopleCount, setPeopleCount }) => {

...

const handleCityChange = (e) => {
  setCity(e.target.value);
};

...

 <input
  type="text"
  placeholder="city name"
  value={city}
  onChange={handleCityChange}
/>

当输入发生变化时，应用程序将调用setCity 函数，该函数将更新父组件中的状态。然后父组件可以使用该值更新SecondPage 组件。我们可以简单地将值作为道具传递：

<NextPage city={city} peopleCount={peopleCount} />

现在您可以使用 SecondPage 组件中的值做任何您想做的事情。这是它的完整代码，它只显示两个值：

export const NextPage = ({ city, peopleCount }) => {
return (
  <div>
    <p>city: {city}</p>
    <p># of people: {peopleCount}</p>
  </div>
);
};

这是完整的工作示例：https://stackblitz.com/edit/react-uccegh?file=src/App.js

请注意，我们没有任何字段验证，我们必须为每个输入手动编写更改处理程序。在真正的应用程序中，您应该避免自己完成所有这些操作，而是使用库来帮助您构建表单，例如 Formik。

【讨论】：