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

不幸的是，这是不可能的（因为用户必须始终有一种关闭标签页/窗口的方式）。

在settings_local.py中唯一可以做的就是

onbeforeunload

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

使用自定义提示停止在React Router中浏览器的刷新和关闭操作

1 个答案: