Как сбросить форму в formik используя enableReinitialize? - PullRequest
Новая
       14

Как сбросить форму в formik используя enableReinitialize?

0 голосов
/ 09 ноября 2019

Я пытаюсь сбросить форму после того, как пользователь нажмет кнопку отмены.

Я создал пример приложения для демонстрации проблемы: https://codesandbox.io/s/dark-worker-ydzgs?fontsize=14

1) Пользователь нажимает кнопку «Редактировать», чтобы открыть форму для редактирования
2) Пользователь вводит что-то в поле
3) Пользователь нажимает кнопку отмены, чтобы закрыть форму
4) пользователь нажимает кнопку Изменить, чтобы снова открыть форму

Что я ожидаю от formik:
формаreset

Фактический результат:
форма не сброшена, она имеет значение, которое пользователь вводит в шаге 3

Я мог сбросить форму, вызвав метод resetForm ().

Однако у меня сложилось впечатление, что enableReinitialize сбросит форму 

enableReinitialize?: boolean
Default is false. Control whether Formik should reset the form if the wrapped component props change (using deep equality).

1 Ответ

1 голос
/ 09 ноября 2019

Formik предоставляет метод resetForm для сброса формы.

До вызова this.props.onCancel вы можете позвонить resetForm

Например, 


class MyForm extends Component {

    ....

    handleCancel = () => {
        this.props.resetForm()
        this.props.onCancel();
    }

    render() {

        return (
          <div>
            ....
            <div className="cancelButton">
              <button onClick={this.handleCancel}>Cancel</button>
            </div>
         </div>
    );
  }

}

const MyEnhancedForm = withFormik({
  initialValues: "",
  enableReinitialize: true,
  mapPropsToValues: props => ({ name: "" }),
  handleSubmit: (values, { setSubmitting }) => {},
  displayName: "BasicForm"
})(MyForm);

enableReinitialize prop сбрасывает форму, только если initialValues изменено, но поскольку ваше начальное значение всегда одинаково (т.е. initialValues: ""), оно никогда не сбрасывается.

...