Как компонент react передает значение предыдущему компоненту страницы

У меня есть два компонента, FormComponent и OrderListComponent. Существует одно поле в FormComponent, чтобы попросить пользователей выбрать значение из списка, который находится в OrderListComponent. Поэтому я помещаю кнопку на поле в FormComponent, когда пользователи нажимают на эту кнопку, я использую router.push('XXXX') для перехода на страницу OrderListComponent, чтобы показать все параметры для пользователя. Когда пользователи нажимают одну из опций на OrderListComponent, я использую router.goBack(), чтобы вернуться к FormComponent. Вот в чем проблема, как это сделать FormComponent получить выбранное значение из OrderListComponent? Я знаю, что могу сохранить выбор как состояние в магазине redux, но я блуждаю, есть ли более прямой способ решить эту проблему.

2 2
javascript reactjs react-redux

2 ответа:

Хранение выбранного значения в хранилище redux или самом состоянии компонента было бы лучшим выбором для этого, но вы также можете

  • храните его в локальном хранилище
  • храните его в 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.
}
0

Лучший способ-это иметь государственного менеджера. Государство, я полагаю, это будет элегантно решать. Хотя как случайный пользователь упомянул в своем ответе; localStorage/sessionStorage можно использовать для этого.

Но передача значений по URL-адресу будет сложной, когда слишком много элементов выбрано для заказа.

Состояние может быть изменено таким образом, что наличие чего-либо в состоянии даст согласованный выход в OrderListCompoennt.

Вы можете иметь состояние заказа и толкать элементы в это состояние. А затем перенаправить пользователя на OrderListComponent вместо того, чтобы делать router.push('XXXX').

OrderListComponent будет следить за состоянием и показывать предметы соответственно.

FormComponent также будет следить за состоянием заказа для маркировки добавленных в данный момент элементов. Таким образом, не будет никаких router.goBack(); только перенаправление по router.push

И когда ваше приложение будет находиться в FormComponent, состояние заказа автоматически будет отвечать за маркировку элементов, которые в данный момент находятся в порядке.

1