如何使用 enableReinitialize 在 formik 中重置表单？

【问题标题】：How to reset form in formik using enableReinitialize?如何使用 enableReinitialize 在 formik 中重置表单？
【发布时间】：2019-11-09 01:01:09
【问题描述】：

我尝试在用户单击取消按钮后重置表单。

我创建了一个示例应用程序来演示该问题：https://codesandbox.io/s/dark-worker-ydzgs?fontsize=14

1) 用户单击“编辑”按钮打开要编辑的表单
2) 用户在字段中输入内容
3) 用户点击取消按钮关闭表单
4) 用户点击编辑按钮再次打开表单

我期望 formik 做什么：
表单已重置

实际结果：
表单未重置，它具有用户在步骤 3 中输入的值

我可以通过调用 resetForm() 方法来重置表单。

但是，我的印象是 enableReinitialize 会重置表单

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

【问题讨论】：

标签： reactjs formik

【解决方案1】：

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 属性仅在 initialValues 更改时重置表单，但由于您的初始值始终相同（即initialValues: ""），它永远不会重置。

【讨论】：