Question

我有一个react-big-calendar，当我单击它时有一个按钮，他的模式将出现，还有一个日历图标按钮，可将我重定向到另一个URL / planning。

我有一个对话框（AjouterDisponibilite），并用组件议程中的ref调用它。

并且日历图标上有一个我尝试的.d.ts事件：

onClick

但是当我运行它并单击图标时，URL的方向正确，但是却显示了this.props.history.push('/planning');，如下所示：

error和 TypeError: Cannot read property 'handleAjouter' of null

当我刷新此页面后，它可以工作。

我的代码是：https://codesandbox.io/s/xw01v53oz

我该如何解决？

Answer 1

问题是引用的使用不当。引用旨在保留对DOM元素和组件实例的引用，而不是对它们的功能的引用。

带有ref道具的组件将在安装时将自身分配给道具的值（或以自身作为参数调用函数），并且对null进行同样的操作卸载时参考。

基于此知识，您必须按以下步骤更改Agenda组件的代码：

ModalAjout = (ref) => {
    if (ref) {
        this.ajout = ref.handleAjouter;
    } else {
        this.ajout = null;
    }
}

ModalAjoutb = (ref) => {
    if (ref) {
        this.ajoutb = ref.handleAjouter;
    } else {
        this.ajoutb = null;
    }
}

Answer 2

解决此问题的最佳方法是添加以下代码：

history.pushState(null, document.title, location.href);

在做什么？首次加载后，它将使用一个值来初始化历史记录，因此您无需进行刷新。

在我的情况下，我是在开发Android应用程序时执行此操作的，并且有一些我想使用“后退”按钮关闭的模式以提供更原生的体验。

Answer 3

我通过添加以下内容来修复它：

<AjouterDisponibilite ref={(evt) => this.ModalAjout({evt})} start={this.state.startDisponibilite} end={this.state.endDisponibilite} date={this.state.dateDisponibilite}/>
<AjouterDisponibilite ref={(evt) => this.ModalAjoutb({evt})} />

方法ModalAjout必须具有一个参数。

刷新后this.props.history.push就可以正常工作

3 个答案: