Показать Prompt response-router v4 при нажатии кнопки ОТМЕНА

Question

Я знаю, что могу использовать следующий фрагмент кода, чтобы пользователи не могли перейти на другую вкладку, не предупреждая их, что они могут потерять введенные данные.

import { Prompt } from 'react-router'

const MyComponent = () => [
    <Prompt
      key='block-nav'
      when={shouldBlockNavigation}
      message='Any cool message here'
    />
]

У меня есть кнопка ОТМЕНА на моей странице, поэтому я хотел бы показать ту же подсказку после нажатия этой кнопки, кто-нибудь знает, как я могу это сделать?

Answer 1

Таким образом, запрос запускается всякий раз, когда его значение равно true, и страница перемещается.

    <Prompt
      key='block-nav'
      when={this.state.shouldBlockNavigation}
      message='Any cool message here'
    />

---

код кнопки:

<button
  onClick={ () => {
    this.setState({shouldBlockNavigation:true});
    window.history.back();
  }
>
Cancel
</button>

Поэтому, когда кто-то нажимает кнопку отмены, мы устанавливаем значение свойства when, а также форсируем навигацию.

Надеюсь, это поможет.

Answer 2

Как-то так должно работать

   <Prompt
     key='block-nav'
     when={this.state.shouldBlockNavigation}
     message='Any cool message here'
  />
  <button onClick={(e) => {
      e.preventDefault();
      this.setState({shouldBlockNavigation:true})
     }}>
   CANCEL
 </button>