reactjs - Formik-确认后如何重置表格

在Formik中，如何使Reset按钮在确认后仅将表单重新设置为？

即使您单击取消，下面的我的代码仍会重置表单。

var handleReset = (values, formProps) => {
    return window.confirm('Reset?'); // still resets after you Cancel :(
};

return (
  <Formik onReset={handleReset}>
    {(formProps) => {
      return (
        <Form>
          ...
          <button type='reset'>Reset</button>
        </Form>
      )}}
  </Formik>
);

最佳答案

我不确定，但是我认为您必须编写自己的重置函数，而无需使用reset类型的按钮。像这样:

const handleReset = (resetForm) => {
  if (window.confirm('Reset?')) {
    resetForm();
  }
};

function Example() {
  return (
    <Formik initialValues={{ value: 1 }}>
      {formProps => {
        return (
          <Form>
            <Field name="value" type="number" />
            <button
              onClick={handleReset.bind(null, formProps.resetForm)}
              type="button"
            >
              Reset
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

如果您真的想使用onReset，我认为唯一的方法是抛出一个错误。 Formik source code似乎表明无论resetForm()函数返回什么，都会调用onReset()。

const handleReset = () => {
  if (!window.confirm('Reset?')) {
    throw new Error('Cancel reset');
  }
};

function Example() {
  return (
    <Formik initialValues={{ value: 1 }} onReset={handleReset}>
      {formProps => {
        return (
          <Form>
            <Field name="value" type="number" />
            <button type="reset">
              Reset
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

我个人还是会采用第一个解决方案。

关于reactjs - Formik-确认后如何重置表格，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55583815/