在单击取消按钮上显示提示反应路由器 v4

Question

我知道我可以使用以下代码片段来防止用户导航到另一个选项卡，而不会提醒他们可能会丢失输入的数据。

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

我的页面中有一个"取消"按钮，所以我想在单击此按钮后显示相同的提示，有人知道我该怎么做吗？

Answer 1

因此，每当值为真且页面导航时，就会触发提示。

<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>