Javascript react组件如何将值传递给上一页组件

我有两个组件，FormComponent和OrderListComponent。FormComponent上有一个字段要求用户从OrderListComponent的列表中选择一个值。因此，我在FormComponent中的字段上放置了一个按钮，当用户单击该按钮时，我使用

router.push（'XXXX'）

将页面导航到OrderListComponent，以显示用户的所有选项。当用户单击OrderListComponent上的一个选项时，我使用

router.goBack（）

返回到FormComponent。问题是，FormComponent如何从OrderListComponent获取所选值？我知道我可以将选择保存为redux商店中的一个状态，但我不知道是否有更直接的方法来解决这个问题

将所选值存储在redux存储或组件状态本身中是更好的选择，但您也可以

• 将其存储在本地存储中
• 将其存储在会话存储中
• 重新重定向用户时，将其作为url参数传递

如果使用这些方法中的任何一种，则可以在

FormComponent

中检查该值是否存在，并相应地执行操作

示例代码

OrderListComponent

let handleChange = (value) => {
  localStorage.orderListValue = value
}

if ( localStorage.orderListValue ) {
  console.log('Yay.. we have data');
} else {
 // ask the user to select the List first.
}

这将取代任何现有的价值，以及..，使用您的大脑在这里

FormComponent

let handleChange = (value) => {
  localStorage.orderListValue = value
}

if ( localStorage.orderListValue ) {
  console.log('Yay.. we have data');
} else {
 // ask the user to select the List first.
}

---

最好的办法是有州经理。Redux state将优雅地解决此问题。虽然是<代码>本地存储/

会话存储

可用于执行此操作

但是，当为订单选择的项目太多时，通过URL传递值将非常棘手

可以更改状态，使任何处于该状态的内容都可以在

orderListComponent

处提供一致的输出

您可以拥有订单状态并将项目推送到该状态。然后将用户重定向到

OrderListComponent

，而不是执行

router.push（'XXXX'）

OrderListComponent

将监视状态并相应地显示项目

FormComponent

还将查看订单状态，以标记当前添加的项目。这样，就不会有任何

路由器.goBack（）

；只需通过

路由器进行重定向。按

---

当您的应用程序位于

FormComponent

时，订单状态将自动负责标记当前已订购的项目。

对于第三种解决方案，“当重新重定向用户时，将其作为url参数传递”，调用“router.goBack（）时，如何将其作为url参数传递'method？@ZhaoYi如果您想使用第三种解决方案，可以从'react router'导入

import{browserHistory}，而不是调用
router.goBack（）
method

在从select字段获取值的函数中，获取值后，执行

browserHistory.push（`/url/of/the page？value=${selectFieldValue}`）仅使用一个反勾（`）这不利于重用组件，因为url不是固定的。将有多个组件导航到OrderListComponent，因此我确实需要router.goBack（）函数来导航回去。您可以将
url
作为道具传递给该组件，然后该组件将从其道具获取url，然后在获取数据后将用户重定向到该位置。，让我检查react router是否允许我们使用goBack（）传递参数我知道localStorage/sessionStorage可以解决这个问题。但它们更适用于长期数据存储。我要存储的值只是一个临时值，使用后我必须将其从存储中清除。无需将它们存储在localStorage/sessionStorage上。我目前的解决方案是使用redux状态，但redux没有提供从存储中删除状态的方法。对于任何状态管理器，使用redux或Flux或Reflech，都不会有任何方法来清除存储。Store是一个具有必要方法的大数据对象。就从订单列表中删除项目而言，传递索引并使用数组切片。您必须创建自己的方法来删除项目。要清除所有项目，可以将订单存储设置为空数组。slice方法会修改数组本身，因此无需再次保存新数组。我想我还应该加上一个粗略的例子。