Как сбросить форму реакции с редукцией, разделенную на разные части (форма мастера)?

Мне не удается сбросить мою форму реакции на редукцию, которая разделена на 3 разные формы/страницы. Это форма мастера, и я безуспешно пытался сбросить ее разными способами.

Я использовал эти 2 ресурса: Как создать форму мастера: https://redux-form.com/8.3.0/examples/wizard/ Как сбросить форму: https://redux-form.com/6.0.0-alpha.4/docs/faq/howtoclear.md/

Однако теперь мне кажется ясным, что это отчасти невозможно сделать.

У меня есть 3 страницы: WizardForm.jsx

<div className="wizard__form-wrapper">
  {page === 1
  && (
    <WizardFormOne
      onSubmit={this.nextPage}
      initialValues={initialValues}
    />
  )}
  {page === 2
  && (
    <WizardFormTwo
      previousPage={this.previousPage}
      onSubmit={this.nextPage}
    />
  )}
  {page === 3
  && (
    <WizardFormThree
      previousPage={this.previousPage}
      onSubmit={values => onSubmit(values)}
    />
  )}
</div>

и в каждой форме я экспортирую свою форму так: WizardFormOne.jsx

export default reduxForm({
  form: 'wizard', //                 <------ same form name
  destroyOnUnmount: false, //        <------ preserve form data
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate,
})(WizardFormOne);

Форма работает отлично, но я не могу ее сбросить. Я пробовал все 4 варианта, описанные в ссылке выше. Например, в моем WizardForm.jsx я делаю:

componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch(reset('wizard'));
  }

Но ничего не происходит, и моя форма не очищается.

Любая помощь горячо приветствуется. Спасибо.


reactjs javascript redux react-redux-form
person Miles M.    schedule 22.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что бы это ни стоило, я нашел решение этой проблемы:

Вы можете передать свойство, такое как resetForm, дочернему компоненту, содержащему форму, в данном случае это WizardFormOne.jsx, и сделать что-то вроде этого:

constructor(props) {
    super(props);
    if (props.resetForm && props.isPristine) {
      props.destroy();
    }
  }

Я уверен, что вы можете поместить его в componentDidMount, мне придется продолжать работать над этим. Это сделало это в моем случае.

person Miles M.    schedule 22.10.2020