Question

我是React-Redux的新手，并试图在用户尝试不保存更改就退出时启动“未保存的更改”对话框。我以为Redux通过isDirty的实现为您做到了。我尝试执行此操作未成功；即使未进行任何更改，该窗体也始终以脏=== true打开。请告诉我我做错了什么，或者我可以做些什么来检测Redux表单中任何地方的更改。

到目前为止，我有

    import { Field, Form, reduxForm, change, isDirty } from 'redux-form';
        ...
            this.state = {
                    dirty: isDirty('ClientViewForm'),
        ...
    public onCancel = (close: boolean) => {
            if (this.state.dirty) {
                this.showUnsavedChangesDialog();
            } 
        }
    ...
    public showUnsavedChangesDialog = () => {
        this.setState({ displayUnsavedChangesDialog: true })
    }

并以Redux格式：

<Dialog appendTo={document.body} header="Unsaved Changes Exist" onHide={thisComponent.hideUnsavedChangesDialog} modal={true} visible={thisComponent.state.displayUnsavedChangesDialog}>
                <div className={classes.generalDialog}>
                    <div className="p-3">
                        You have made edits.  If you close without saving, you will lose your changes.
                            </div>
                    <div className="dialogFooter">
                        <Button label="Close without Saving" onClick={thisComponent.props.onHide} />
                        <Button label="Cancel" onClick={thisComponent.hideUnsavedChangesDialog} />
                    </div>
                </div>
            </Dialog>

这再次不起作用，因为当我第一次打开表单时，dirty已经设置为true。任何建议将不胜感激。

Answer 1

isDirty不是动作创建者。这是一个选择器。您必须将其放入mapStateToProps内，并将state作为第二个参数传递。

const mapStateToProps = (state) => ({
   isDirty: isDirty('ClientViewForm')(state),
});

然后只需将其初始化为您的状态即可：

this.state = {
   isDirty: this.props.isDirty,
};

更改后，您的组件将自动重新呈现。

如何检测Redux表单中的更改

1 个答案: