如何使用 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);

该enableReinitialize如果道具重置的唯一形式initialValues被改变，而是因为你的初始值始终是相同的（即initialValues: ""），它永远不会重置。