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

Question

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

我创建了一个示例应用程序来演示该问题：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).

Answer 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);

只有当 initialValues 改变时 enableReinitialize 属性才会重置表单，但是因为你的初始值总是相同的（即 initialValues: ""），它永远不会重置。

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

How to reset form in formik using enableReinitialize?

reactjs

formik