react组件如何传值给上一个页面组件

Question

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

Answer 1

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

存储在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.
}

Answer 2

最好的方法是拥有状态管理器。 Redux 状态将优雅地解决它。虽然作为； localStorage/sessionStorage 可用于执行此操作。

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

状态可以更改，因此状态中的任何内容都会在 OrderListCompoennt 处提供一致的输出。

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

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

FormComponent 也会观察订单状态以标记当前添加的项目。这样一来，就不会有router.goBack()；只是 router.push

的重定向

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

react组件如何传值给上一个页面组件

How does react component pass value to the previous page component

javascript

reactjs

react-redux