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: ""），因此它永远不会复位。

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

1 个答案: