Question

在我的Web应用程序中，我想在用户尝试使用事件处理程序根据Redux状态关闭浏览器/选项卡时提示用户。

我使用以下代码在退出之前根据'isLeaving'状态提示用户。

function mapStateToProps(state) {
    const {isLeaving} = state.app.getIn(['abc']);
    return {
        isLeaving
    };
}

@connect(mapStateToProps, {}, undefined, {withRef: true})
export default class MyClass extends React.component {
    @autobind
    stayOnPage(event) {
        if (this.props.isLeaving) {
            const message = 'Are you sure you want to leave';
            event.returnValue = message;
            return message;
        }
        return false;
    }

    componentDidMount() {
        window.addEventListener('beforeunload', (event) => {
            this.stayOnPage(event);
        });
    }

    componentWillUnmount() {
        window.removeEventListener('beforeunload', (event) => {
            this.stayOnPage(event);
        });
    }



    componentWillReceiveProps(nextProps) {
        if (this.props.prop1 !== nextProps.prop2) {
           // do something
        }
    }

    render() {
       //
    }
}

此代码工作正常。但是每当prop1发生变化时，我都会看到this.props.isLeaving没有更新的值。

有人可以帮忙吗？我在这里做错了什么？

Answer 1

您无法在componentWillUnmount中正确清理。您尝试删除的事件处理程序是一个全新的函数闭包，而不是您添加的同一个实例。你应该只附加实际的处理程序，而不是使用箭头函数，如下所示：

componentDidMount() {
    window.addEventListener('beforeunload', this.stayOnPage);
}

componentWillUnmount() {
    window.removeEventListener('beforeunload', this.stayOnPage);
}

您可能看到的是在陈旧的组件实例上触发的事件，因此它具有旧状态。

Answer 2

React使用合成事件，基本上事件被回收以提高性能。您可以在here

上阅读更多内容

我通常做的是传递调用所需的值

不确定这是否适用于您的特定情况，因为我在JSX中定义我的事件处理程序而不是访问window对象（您可能也想要这样做但是说实话我不是确定）但我一直使用这种模式正确处理e.target.value

事件处理程序无法从redux状态访问正确的值

2 个答案: