Как обнаружить изменения в форме Redux - PullRequest
Новая
       4

Как обнаружить изменения в форме Redux

0 голосов
/ 30 ноября 2018

Я новичок в 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>

Это не работает, опять же, потому что, когда я впервые открываю форму, грязныйуже установлен в true.Любой совет будет оценен.

1 Ответ

0 голосов
/ 30 ноября 2018

isDirty не является создателем действия.Это селектор.Вы должны поместить его внутрь mapStateToProps и передать state в качестве второго аргумента. 

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

Затем просто инициализируйте его в своем состоянии: 

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

Когда оно изменится, вашКомпонент будет автоматически перерисован.

...