Question

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

import { Prompt } from 'react-router'

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

我的页面上有一个CANCEL按钮，所以一旦单击该按钮，我想显示相同的提示，有人知道我该怎么做吗？

Answer 1

因此，只要其true值为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>

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

2 个答案: