javascript - 使用自定义提示停止 react 路由器中浏览器的刷新和关闭操作

Question

我有一个表单，因此当用户单击刷新(ctrl + r，浏览器上的图标)或关闭浏览器按钮时。我需要显示自定义模式框而不是浏览器提示框。

在自定义模式框中，它将显示消息“数据将丢失”，有两个按钮“确定”和“取消”

一旦用户单击“确定”，它应该返回主路线并取消它应该保留在页面中。

我能够看到浏览器刷新和关闭的提示框，我如何使用我的自定义模式并实现它来执行刷新和关闭操作。跨浏览器特定。

浏览器提示消息是您所做的更改可能无法保存。”我无法传递自定义消息，我需要“确定”按钮并取消，但要取消并重新加载。

请参阅下面的实现代码。

// Form component
import React from 'react'
import CustomPrompt from './Prompt';
import Form from './Form';


const formComponent = (props) => {
    return (
     <CustomPrompt >
      <Form data={props.data}/>
     <CustomPrompt />
    )
}

export default formComponent


// CustomPrompt

import React, {Component} from 'react';
import {Prompt} from 'react-router-dom';

class CustomPrompt extends Component{
    componentWillMount(){
        onbeforeunload = e => 'Dont leave'
    }

    componentWillUnmount(){
        onbeforeunload = null
    }

    render(){
        return (
            <div>
                <Prompt when={true} message={location => location.path('/home')} />
                {
                    this.props.children
                }
            </div>
        )
    }
}


export default CustomPrompt;

如何创建自定义模式并在刷新和关闭时覆盖浏览器的现有模式。

感谢任何帮助:)

Answer 1

不幸的是，这是不可能的(因为用户必须始终有一种方法来关闭选项卡/窗口)。

在onbeforeunload中你唯一能做的就是

event.preventDefault();
event.returnValue = 'Some browsers display this to the user';

然后它将显示浏览器确认框。根据浏览器的不同，它可能会也可能不会显示您的自定义消息(如果不显示，则有时会用于欺骗目的)。根据配置，浏览器可能根本不显示确认信息，而只是卸载页面。