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

Question

我有两个组件，FormComponent和OrderListComponent。 FormComponent上有一个字段要求用户从列表中选择一个来自OrderListComponent的值。所以我在FormComponent的字段上放了一个按钮，当用户点击该按钮时，我使用volume = Calculate.do_calc().get_volume(a); 将页面导航到OrderListComponent以显示用户的所有选项。当用户单击OrderListComponent上的其中一个选项时，我使用router.push('XXXX')返回到FormComponent。这是问题，FormComponent如何从OrderListComponent获取选定的值？我知道我可以将选择保存为redux商店中的状态，但是我是否有更直接的方法来解决这个问题。

Answer 1

最好的方法是让国家经理。 Redux州将优雅地解决它。虽然是Random User mentioned in his answer; localStorage / sessionStorage可用于执行此操作。

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

可以更改状态，以便处于状态中的任何状态将在OrderListCompoennt处提供一致的输出。

您可以拥有订单状态并将商品推送到该状态。然后将用户重定向到OrderListComponent，而不是router.push('XXXX')。

OrderListComponent会观察状态并相应地显示相关项目。

FormComponent还会查看用于标记当前添加项目的订单状态。这样，就不会有router.goBack();只是按router.push

重定向

当您的应用程序位于FormComponent时，订单状态将自动负责标记当前有序的商品。

Answer 2

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

• 将其存储在 localStorage
中
• 将其存储在 sessionStorage
中
• 重定向用户时，将其作为url参数传递

如果您正在使用这些方法中的任何一种，请在FormComponent中检查该值是否存在并相应地执行操作。

示例代码

OrderListComponent

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

这将取代任何现有的价值..，在这里使用你的大脑。

FormComponent

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